Jump to content
Sign in to follow this  
Noz03

Why did I lose my responsiveness?

Recommended Posts

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">

Share this post


Link to post
Share on other sites

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%

Share this post


Link to post
Share on other sites

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 by davej
  • Like 1

Share this post


Link to post
Share on other sites

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 :(

Share this post


Link to post
Share on other sites

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%.

Share this post


Link to post
Share on other sites

 

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 by Dreadful_Code

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by Dreadful_Code

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?responsive-bug.jpg

Share this post


Link to post
Share on other sites

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

 

Again, that can be done with media queries.

Share this post


Link to post
Share on other sites

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%;}

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...