Reduce site margins in stretched layout

Hey Rikard,

thank you very much for your quick reply/help.

This CSS works fine for large screens (desktop), but it makes the margin too small on tablets and smartphones.
So I tried the following addition and it seems to work in an acceptable way:

@media only screen and (min-width: 1200px) {
#top .av_header_stretch .container {
width: 98%!important;
}}

Although I´d prefer pixel-precise constant margins for all devices (desktop and mobile), it’s still okay as it is now, if that would be too complicated!?

Thanks a lot for another reply in advance.

Best regards,
fkm

Hi Rikard,

thank you very much for your quick response again.
Unfortunately, vw doesn’t seem to make a difference.

Best regards,
fkm

Hi Rikard,

thank you very much for your reply.

If that’s possible, I would even prefer fixed pixel values for all devices.
Please let me know how to do.

Thanks a lot in advance.

Best regards,
fkm

Hi Rikard,

is it also possible to define not the width of the website as fixed pixel value, but the spacing from the margins?

Thanks for another reply in advance.

Best regards,
fkm

Hi Rikard,

that’s pretty close. :)

On the left side of the page the menu moves exactly those 20px to the right on all devices as desired.
However, the logo on the right side also moves to the right instead of to the left so the logo cut off (please see screenshot).
If that could be fixed, the goal would be achieved.
Please help.

Thanky you very much in advance.

Best regards,
fkm

Hi Rikard,

thank you very much for your reply.

I removed the CSS code after taking the screenshot in Firefox.
Now it’s back in and the issue is also visible in Chrome on my end.
Please check again – thanks a lot in advance.

Best regards,
fkm

Hi Rikard,

thank you very much for your reply.

I am a little bit confused that you were seeing the logo flush to the right edge because it was always cut off on different computers in different browsers here. Please see screenshot (that was the way I was seeing it) and please let me know if it looked different on your end?

And thank you very much for the CSS.
Those allowed me to make the adjustments exactly as I wanted:

@media only screen and (min-width: 767px) {
#top .av_header_stretch .container {
width: 100% !important;
margin: 0 35px;
}}

@media only screen and (min-width: 767px) {
.html_header_top #top .av_logo_right .logo {
right: 52px;
}}

Now it looks great. So if that’s technically okay, the problem is solved.

Thanks a lot in advance for a final reply in this case.

Best regards,
fkm

Hi Rikard,

you´re right, so the topic is successfully completed (please feel free to close it).

Thank you very much for your support.

Best regards,
fkm