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!
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
For CSS-specific issues, consider posting in CSS-specific forums.
Thank you! Will give it a try.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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.
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
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!
Update: If I disable the query styles, the sidebar still jumps. I really do not understand!
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
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
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!
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…
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.
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!
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.
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
