Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

CSS - Responsive columns for WP site

Posted on 2015-01-22
3
Medium Priority
?
138 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
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

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

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

Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…
Suggested Courses

971 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