Jump to content

Responsive design.

Noz03

By Noz03
in CSS

 Share

Recommended Posts

Noz03 Newbie

Noz03

Posted
Posted

Hey guys, I have been stuck on this problem for literally 3 months now! So I REALLY hope someone here might be able to help before I lose my mind!

 

I am using a responsive wordpress theme which has a custom home page with 2 main cells which originally have the following style in the style.css file:

.col-460 {    width: 48.936170212766%;}

All I want to do is change the ratio so that the right box is larger than the left one, something like 65%/35% so I added this code to the style.css

.col-c35{	width: 33.92%;}.col-c65{	width: 63.92%;}

And changed the style of each box in front-page.php as such:

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

It worked great on my screen, but when the screen size is small enough it decides to stack the boxes so that they will be easier to read on a mobile screen, however for some reason they still keep their % sizes so they are stacked but at 33% instead of changing to fill the screen. It's hard to explain but you can check the site and resize the window to see. http://thestupidforeigner.com

 

Does anyone have any idea how I can fix this? Really, I have tried everything but I can't seem to work this out. I hope someone can help.

 

 

Thanks a lot,

-Dan

Link to comment
Share on other sites
davej Devoted Member

davej

Posted
Posted

They are stacking because of rounding errors and float -- not because of a responsive re-configuration. You need to loosen up your math so that the rounding errors don't cause stacking until you reach the width where you want a re-configuration. Then use an @media block to re-configure the style.

@media screen and (max-width: 300px) {/* compact style */}
Link to comment
Share on other sites
davej Devoted Member

davej

Posted
Posted

Yes, what I'm saying is that right now they only stack because of float. Are you familiar with using float? Float causes elements to sit next to each other as long as there is room. When there isn't room (the page is too narrow) the last element will drop down to the next row.

 

http://www.w3schools.com/css/tryit.asp?filename=trycss_float_elements

Link to comment
Share on other sites
Noz03 Newbie

Noz03

Posted
  • Author
Posted

Ok, but how do I make the items take up the full width of the screen when they drop down? They are still only taking up the % width that I give them even after they stack. Before I customized the theme they were 49/49% but after stacking they became 100%. I don't get why changing the 49/49 to 34/64 should affect the stacked width.

Link to comment
Share on other sites
davej Devoted Member

davej

Posted
Posted 
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]--><title>responsive</title><style>*{margin: 0;padding: 0;}p {margin: 10px;}#wrap {width: 100%;}#left,#right {width: 48%;float: left;margin-right: 2%;text-align: justify;}#left{color: red;}#right {color: green;}@media screen and (max-width: 640px) {#left,#right {width: 100%;min-width: 320px;float: none;text-align: justify;}}@media screen and (max-width: 320px) {#left,#right {text-align: left;min-width: 200px;}}#footer{float: none;clear: both;text-align: center;}</style></head><body><div id="wrap"><div id="left"><p>LEFT Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. LEFT</p></div><div id="right"><p>RIGHT There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. RIGHT</p></div></div><div id="footer"><a href="http://webdesignerwall.com/tutorials/responsive-design-in-3-steps">responsive-design-in-3-steps</a></div></body></html>
Link to comment
Share on other sites
Noz03 Newbie

Noz03

Posted
  • Author
Posted (edited)

Ok! I finally got it! I just added:

@media screen and (max-width: 980px) {.col-c35{	width: 98%;}.col-c65{	width: 98%;}}

to the css file and it now works!!One thing though... now that it is working I am thinking it is actually stacking it too soon, the sidebar disapears at 980 which is fine, but i dont want to items to stack until maybe around 750. how can I change this? I tried playing with float but honestly I dont even know where to put the float, i guess in the front-page.php? or in the css? Any suggestionsThanks again, really I spent 3 months with this problem!!! Am so happy its finally fixed :D

Edited by Noz03
Link to comment
Share on other sites
davej Devoted Member

davej

Posted
Posted (edited)

You are writing css so it goes into the css file. What I have been doing is adding the reconfigurations to the bottom of the css file or in a <style> block in the head of the page in question. You progress from wide to narrow, so you could try something like...

@media screen and (max-width: 980px) {.col-c35, .col-c65{  width: 49%;}.sidebar{  display: none;}}@media screen and (max-width: 750px) {.col-c35, .col-c65{  width: 98%;  float: none;  clear: both;  min-width: 300px;}}
Edited by davej
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...