Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

CSS - Responsive columns for WP site

Posted on 2015-01-22
3
Medium Priority
?
135 Views
Last Modified: 2015-01-25
Trying to get this site to be responsive. The theme claims it's responsive, maybe it is and the other plugins I'm using is disrupting it. Regardless I'd like someone to walk me through a method of applying CSS to get my content responsive.

URL: http://7pwc.moshpitdigital.com/

I'm using the WP plugin visual composer to columnize my content. This is a pretty annoying plugin to work with and I think it's making responsive design more difficult. However I'm a total beginner with CSS and I've never layed out columns with straight HTML and CSS. If you think this route is worth it let me know and I'll abandon Visual Composer and create a new question so you can be awarded more points. :)

Any help appreciated. Thank you.
0
Comment
Question by:doug s
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 6

Assisted Solution

by:Tony O'Byrne
Tony O'Byrne earned 800 total points
ID: 40566673
To get you started...

It looks like the div with id=main has a fixed width of 1182px.  This is interfering with the responsiveness.  In responsive design, you need to be careful of your absolute widths (ie, px, em, etc.) and use % where possible.

If you use something like 90% instead of 1182px, you get a very similar look to what you had before, and it's responsive.

In the CSS, look for " #main " and change the width property.
0
 
LVL 3

Accepted Solution

by:
Morgan Finley earned 1200 total points
ID: 40566781
Doug,

You should probably set the entire page column width to 95%, and then use a max-width property set to 1182px so it never gets any bigger than it is currently. This is a pretty standard way to make a page scale down, but sets a limit to it scaling up.

You should probably read the book "Responsive Web Design" by Ethan Marcotte, as it's a great introduction to the concepts of  responsive design. In the book he provides a handy formula for taking a column width and converting it into % that goes something like this:

Target / Context = %

So in the example of the three columns contained within your entire page column that would look like:

(pixel width of the internal column) / (pixel width of page container) = % measurement for the internal column.

That's just to get you started in the right direction, hope I didn't send you down a rabbit hole.
0
 
LVL 4

Author Comment

by:doug s
ID: 40569400
Thanks a ton guys this helps me out.
0

Featured Post

Learn how to optimize MySQL for your business need

With the increasing importance of apps & networks in both business & personal interconnections, perfor. has become one of the key metrics of successful communication. This ebook is a hands-on business-case-driven guide to understanding MySQL query parameter tuning & database perf

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchiā€¦
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

670 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question