Solved

CSS - Responsive columns for WP site

Posted on 2015-01-22
3
131 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 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

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
compare date to getdate() 8 34
Can anyone help me find this preloader? 51 68
jQuery menu problem in an older browser 6 31
center div inside another div 2 32
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
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 is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

739 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