Why did I lose my responsiveness?

[Noz03]

My site has a custom home page template which by default had 2 items, a text and an image. I changed the style of these 2 items to make the image bigger and the text smaller, but now when the site stacks the items for a responsive view the items don't automatically resize to fit the new space as they used to do before I made my changes. The site is http://thestupidforeigner.com if you resize your window you will see what I mean, it looks horrible. Any ideas why?

I changed the style from

.col-460 {    width: 48.936170212766%;}

to

.col-c35{    width: 35%;}.col-c65{    width: 65%;}

If you need to see the php it's like this:

	<div id="featured" class="grid col-940">			<div class="grid col-c35">									<p>				<?php				if ( isset( $responsive_options['home_content_area'] ) && $db && $empty )					echo do_shortcode( $responsive_options['home_content_area'] );				else					_e( 'Your title, subtitle and this very content is editable from Theme Option. Call to Action button and its destination link as well. Image on your right can be an image or even YouTube video if you like.','responsive' );				?>			</p>			        					</div><!-- end of .col-c35 -->		<div id="featured-image" class="grid col-c65 fit">

[Ingolme]

Sometimes, when calculating pixel sizes from percentages, the browser might round up, causing elements to stack because they're just one pixel too wide. You can change one of the numbers, instead of 35% you can make it something like 34.75%, or instead of 65% make it 64.75%

[davej]

I guess this is WordPress? I'm always amazed when I look at a website that looks pretty simple... but then I discover that it uses dozens of css files and dozens of javascript files and who knows how many PHP files. And then even with all that there are also embedded scripts and inline css mixed into the html. How can you keep a thing like that organized so that you can find what you want?

Edited July 7, 2013 by davej

[Noz03]

Sometimes, when calculating pixel sizes from percentages, the browser might round up, causing elements to stack because they're just one pixel too wide. You can change one of the numbers, instead of 35% you can make it something like 34.75%, or instead of 65% make it 64.75%

 

Actually I also thought this might be the problem as the original was quite a bit lower than 100% total so I tried making it 34% and 64% but still same problem

[Ingolme]

Remember that percentage widths aren't including margins and padding. Be sure to set those to percentages as well and that adding them won't exceeed 100%.

[Dreadful_Code]

 

Actually I also thought this might be the problem as the original was quite a bit lower than 100% total so I tried making it 34% and 64% but still same problem

That's still not enough.... try dropping it to 30% and 60%, respectively, and go up from there....

 

All failing, you may have to drop in another css sheet to handle this-- call it reset.css and have it load after all the other CSS stylesheets load. The main purpose of this would be to fire media queries, a CSS3 spec that styles your elements based on your screen orientation and/or screen size.

@media all and (max-width: 920px) and (min-width: 520px) {  .col-c35  {   width:30%;  }  .col-c65  {   width:60%;  }} 

Do a search on reset.css and media quesries. Case examples are exhaustive and easy to implement once you get the hang of them.

Edited July 8, 2013 by Dreadful_Code

[Ingolme]

Setting to 30% and 60% is exaggerated. When working with percentages, a 1% difference can easily be up to 10 pixels. Since the rounding errors caused by converting percent to actual pixels will cause a difference of, at most, one pixel you only need to make tiny changes to the percentage values to prevent stacking. You only need to change probably 0.5% at most.

[Dreadful_Code]

Setting to 30% and 60% is exaggerated. When working with percentages, a 1% difference can easily be up to 10 pixels. Since the rounding errors caused by converting percent to actual pixels will cause a difference of, at most, one pixel you only need to make tiny changes to the percentage values to prevent stacking. You only need to change probably 0.5% at most.

Well, that's awful nitpicky.

 

It's an approach. Reason being:

 

It's a starting point. You could spend 2 hours decrementing the percentage, by a 1/10 of a percent, or exaggerate the layout a little to observe its behavior. You'd know that if the layout wouldn't work at 30% & 60% percent, there are other problems, which is usually the case with WP layouts.

 

One little customization usually spells 3 hours of debugging and code searching for conflicting css sheets and js scripts.

Edited July 8, 2013 by Dreadful_Code

[Ingolme]

You wouldn't have to be two hours decrementing the percentage. There's a particular mathematical reason why the elements are stacking and it's important to get to the core of the problem rather than continue making adjustments until it works.

 

If subtracting small amounts from the percentage values to prevent rounding errors doesn't prevent the stacking on the first try that means that padding or margins are causing the problem. So just get straight to it. If the padding or margins are in pixels the stacking will always occur at one point or another, so for the outermost containers I recommend setting any margins in percentages as well.

 

So here's a two-column example of percentages that will add to 100%, and taking rounding into account to prevent stacking. To prevent these rounding errors, we can assume that 100% is 960px, so 1px would be 100 * 1/960 which is approximately 0.1042%, we can make that 0.11% to ensure that smaller screens don't cause stacking either.

Left column:

- left-margin: 0.5%

- right-margin: 0.25%

- width: 64.25 - 0.11 = 64.14%

Right column:

- left-margin: 0.25%

- right-margin: 0.5%

- width: 34.25 - 0.11 = 34.14%

Total: 0.5 + 0.25 + 64.14 + 0.25 + 0.5 + 34.14 = 99.78%

If your window is 960 pixels wide your page will only be off from the desired layout's position by two pixels. The layout is guaranteed not to cause stacking assuming you don't add padding to the boxes. If you want to add padding you'll have to also take it into account when doing calculations.

[Noz03]

I think I've been misunderstood. I WANT them to stack when it goes below a certain screen resolution so that it would suit a mobile screen better. BUT, since I changed the ratio between the featured image and the text, WHEN they stack it keeps the same % that I set instead of then going to 100% like it used to. Here is a screen shot of how it looks

 

 

 

Before I changed the % in the css for the image and text it was automatically becoming 100% for both when it stacked for mobile screens. How can I get it to keep doing that?

[Dreadful_Code]

So you want the percentages of the widths to change based on the window size.

 

Again, that can be done with media queries.

[Noz03]

Well they were already changing until I made the minor changes to the %s in the css file. Why did my small changes affect this? It worked fine when they both were set to

.col-460 {    width: 48.936170212766%;}

[Ingolme]

Both columns had the same width, so when stacked upon eachother they looked the same. When they have different widths, they'll appear different when stacking.

 

As Dreadful_Code mentioned, a media query would solve it. For example:

@media only (max-width: 600px) {    col-c35{        width: 100%;    }    col-c65{        width: 100%;    }}

That means that when the screen is 600 pixels or smaller the columns will stack.