WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Twenty Eleven @media (max-width: 767px) ? (17 posts)

  1. lusitanoflickan
    Member
    Posted 1 year ago #

    Hi,

    I am working on a child theme based on Twenty Eleven, see site http://worksofchivalry.com/

    I would like the site to look the same on both landscape and portrait mode of an iPad (the sidebar should not go to the bottom) and therefore I made following changes in the stylesheet:

    @media (max-width: 800px)

    changed to

    @media (max-width: 767px)

    I thought this would be a quick fix, but the website still changes in portrait mode.

    I have to admit I do not yet know a lot about responsive web design so I might have missed something obvious.

    Does anybody know how I could fix this? Thanks a lot!

  2. lusitanoflickan
    Member
    Posted 1 year ago #

    Update: It does not seem to be a problem with the @media styles, because I added my menu there to strech all under the logo and header image, and it does when the screen width gets under 768px. The problem is that the content part widens and the sidebar moves down before this (somewhere around screen width 800px).

    If somebody could help me localize the problem I would be very grateful!

  3. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    For CSS-specific issues, consider posting in CSS-specific forums.

  4. lusitanoflickan
    Member
    Posted 1 year ago #

    Thank you! Will give it a try.

  5. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    I'm sorry not to be more helpful, but queries as specific as yours aren't regarded as within the scope of support covered by WordPress.org forums.

  6. Arthur Broeders
    Member
    Posted 1 year ago #

    Hi lusitanoflickan,

    Nope, it certainly is a @media styles issue:

    At @media (max-width: 768px) both #main #content and #main #secondary are changed to width: auto;.
    Hence both are stretched to 100% and thus the sidebar dives under the content.

    (That's lines 2242-2245 and 2250-2254 in the stylesheet.)

    Move that to the @media (max-width: 650px) and you keep the sidebar next to the content in iPad Portrait.

    Kind regards,

    Arthur

  7. lusitanoflickan
    Member
    Posted 1 year ago #

    Hi Arthur,

    First, thank you for trying to help me!

    Your solution does not work (but I gave it a try!). Since an iPad's resolution width is 768px in portrait mode and I have set the max-width to 767px it should not affect the website in an iPad.

    Try to make the width of yor browser slowly smaller and you will see that the sidebar jumps down before the menu expands. The meny expands when the width is 767px and below but the sidebar jumps already around 800px.

    Any idea?

    Thanks again!

  8. lusitanoflickan
    Member
    Posted 1 year ago #

    Update: If I disable the query styles, the sidebar still jumps. I really do not understand!

  9. Arthur Broeders
    Member
    Posted 1 year ago #

    Hi lusitanoflickan,

    I am looking at your stylesheet (worksofchivalry/style.css) and is says

    @media (max-width: 768px) {
    	/* Simplify the basic layout */
    	#main #content {
    		margin: 0 7.6%;
    		width: auto;
    	}
    	#nav-below {
    		border-bottom: 1px solid #ddd;
    		margin-bottom: 1.625em;
    	}
    	#main #secondary {
    		float: none;
    		margin: 0 7.6%;
    		width: auto;
    	}

    starting from line 2240.
    I cannot find a breakpoint max-width: 767px, though.
    Have you perhaps changed the parent stylesheet (twentyeleven/style.css) instead?

    I have tested your page, with your stylesheet, on an iPad.
    Works like a charm.

    Kind regards,

    Arthur

  10. Arthur Broeders
    Member
    Posted 1 year ago #

    Hi lusitanoflickan,

    Hmm, now is does read 767px. Strange!

    But still, you have to move the code for #content and #secondary to the next breakpoint.

    So is should read (and keep the first one at 768px!)

    @media (max-width: 768px) {
    	/* Simplify the basic layout */
    	#main #content {
    	}
    	#nav-below {
    		border-bottom: 1px solid #ddd;
    		margin-bottom: 1.625em;
    	}
    	#main #secondary {
    	}

    and

    @media (max-width: 650px) {
    	/* @media (max-width: 650px) Reduce font-sizes for better readability on smaller devices */
    	body, input, textarea {
    		font-size: 14px;
    	}
    	#main #content {
    		margin: 0 7.6%;
    		width: auto;
    	}
    	#main #secondary {
    		float: none;
    		margin: 0 7.6%;
    		width: auto;
    	}

    Really works.

    Kind regards,

    Arthur

  11. lusitanoflickan
    Member
    Posted 1 year ago #

    Hi Arthur,

    You might have taken a look at the css during the 10 seconds I tried 768px ;) Bad luck!

    The thing is that I want to keep the sidebar in its normal posistion when the screen width is 768px and more. I therefore do not understand why I should keep that number? Also, it does not help moving #main #content and #main #secondary to the next breakpoint. The sidebar still jumps at 800px...

    Sorry, but I still need help. Thank you for your try!

  12. lusitanoflickan
    Member
    Posted 1 year ago #

    Update: It is not a @media styles issue. I have tried changing the @media to max-width 767px on an untouched demo site that I have and it worked fine. The problem is something I have caused while modifying the styles of this specific site. I am trying to figure out what I have messed up...

  13. Arthur Broeders
    Member
    Posted 1 year ago #

    Hi lusitanoflickan,

    Well, yes of course it still jumps at 800px.
    You are altering breakpoints in your own stylesheet, but still the twentyeleven stylesheet is loaded (imported) first.

    And there you will find:

    @media (max-width: 800px) {
    	/* Simplify the basic layout */
    	#main #content {
    		margin: 0 7.6%;
    		width: auto;
    	}
    	#nav-below {
    		border-bottom: 1px solid #ddd;
    		margin-bottom: 1.625em;
    	}
    	#main #secondary {
    		float: none;
    		margin: 0 7.6%;
    		width: auto;
    	}

    So that breakpoint still is valid and works.
    You should reset that in your own stylesheet as well.

    For my test I had simply removed the import of the twentyeleven stylesheet. Then is all works fine. But that was a quick-n-dirty trick!

    I hope this helps.

    Kind regards,

    Arthur.

  14. lusitanoflickan
    Member
    Posted 1 year ago #

    Arthur, you are a genious! THANK YOU! Now I can sleep good tonight. Wow, great. I was sure it was just a stupid detail. Thanks again. Wow!

  15. Arthur Broeders
    Member
    Posted 1 year ago #

    Hi lusitanoflickan,

    Uploaded a TEST page for you. You can save the page and look in the altered style.css (if you need some more clues).

    Said again: works as you asked for on a iPad Portrait: sidebar next to content.

    The reset code is

    @media (max-width: 800px) {
    	/* Simplify the basic layout */
    	#main #content {
    	margin: 0 7.6% 0 34%;
    	width: 58.4%;
    	}
    	#main #secondary {
    	float: left;
    	margin: -7% 0 0 0;
    	width: 23.91%;
    	}
    }

    I will keep it uploaded for one day.

    To be honest: it still feels all a bit quick-n-dirty:

    - you have copied the complete parent stylesheet in the child stylesheet;
    - you have added a 768px breakpoint in the child css but leave the 800px breakpoint as is in the parent (where now only a small part is 'reset')

    But well, it works :-)

    Kind regards,

    Arthur.

  16. lusitanoflickan
    Member
    Posted 1 year ago #

    Hi Arthur,

    Thank you very much! The problem can be considered fixed. However, I did not make a reset, I only took away the link that includes the parent stylesheet. I feel like I do not need that, since I already have all the codes in my child theme. Is it bad to do it that way?

    Andréa

  17. Arthur Broeders
    Member
    Posted 1 year ago #

    Hi lusitanoflickan,

    Good :-)

    "Is it bad to do it that way?"

    Hell no! The purpose of a child theme is to make all additions for the parent in that named child theme. So you can upgrade the parent without loosing your own modifications. True and very good practice.

    Maybe different when you are working for clients (etc.) but as long as you are pottering your own private site, as long as you are learning, and as long as it loads fast AND you are happy with the result: whatever it takes, right?

    Good luck with your WordPress site.

    Kind regards,

    Arthur

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.