I have set up a sidebar on my WordPress website. As long as the browser on the notebook is set to full screen, it works very well.
As soon as you minimize the browser or open the website on your mobile phone, the following happens:
The sidebar slips under the content (main text), which is fine and is wanted. BUT the content decreases in width and on the right it remains empty… It is exactly the width that the sidebar would have needed if it had remained there next to the main text!
Incidentally, the sidebar below the content is also reduced in width…
What am I doing wrong?
Have a look yourself: http://www.trekkingplatz.de
The col9 element is at 75%, even for small screens.
Write in your CSS (or Custom CSS) below
@media (max-width: 767px) {
.col9 {
width: 100%;
}
}
I found a place similar to the one described above and changed col9 to 100%.
Nothing has changed on the mobile phone = 75%. In full screen mode on the notebook, it shows me the content at 100% and the sidebar is below (but also reduced).
I have to say that I found a dozen jobs with @media. Think this is going to be more complicated. Unfortunately I'm not allowed to publish code segments.
Then a bracket is open somewhere.
Yes, thank you. I'm trying to find it.
I did it! In the meantime I also understood that I don't have to change anything directly in the program, but in this custom CSS. I never knew what that was (shame on me).
Now the page on the mobile phone looks like this:
Above the full text of the main text. Very good!
Below the sidebar in 25% and right next to it free.
What is the name of the col for the sidebar? Can I probably use the same code there?
