Solved

CSS - Responsive columns for WP site

Posted on 2015-01-22
3
117 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 200 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 300 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Bootstrap more than 12 columns in row 3 37
Angular JS Route 3 45
Form Processing in PHP 11 30
WP_Query multiple custom taxonomies 5 24
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

914 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now