[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 143
  • Last Modified:

CSS - Responsive columns for WP site

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
doug s
Asked:
doug s
2 Solutions
 
Tony O'ByrneSenior Web DeveloperCommented:
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
 
Morgan FinleyCommented:
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
 
doug sAuthor Commented:
Thanks a ton guys this helps me out.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now