Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
/* remove boxed above 1000px */
@media only screen and (min-width: 1000px) {
#boxed {
width: 100% !important;
max-width: 100% !important;
}
}
/* set width and max-width above 1825px */
@media only screen and (min-width: 1825px) {
#boxed {
width: 90% !important;
max-width: 1600px !important;
}
}
Attached a screen shot - on scroll the header menu has a left justified black box around it and some of the content rows have a padding on the left and right handside - I've checked the margins/padding on the actual row and it looks ok.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
I wondering if it is possible to enable a Boxed Layout on a website (https://hopeful-fermat.212-48-69-126.plesk.page), but only for ultra wide screens?
A bit like the Audi website does - https://www.audi.co.uk/
So once a row set to Full Width Background stretches so far it goes to a boxed version.
Or alternatively can I tweak the Extended Responsive Design settings to do something similar?
Regards
John
Hey Again,
The only way to make this work is to use the Boxed Layout Feature in the Salient Theme Options Panel and enable it for Ultra Wide Screens only.
Thanks
ThemeNectar Support Team
OK, I know how to enable the Boxed Layout Feature - but how do I set it to only work on Ultra Wide Screens - is it an option or does it require CSS?
Regards
John
This will require Custom CSS, let us know the page url with the Boxed Layout active so we can write it up for you.
Thanks
ThemeNectar Support Team
Much appreciated - here's the website - https://hopeful-fermat.212-48-69-126.plesk.page
Regards
John
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
Thanks
ThemeNectar Support Team
Thanks that's kind of worked, but I think there are issues with the menu and row content having additional padding - https://hopeful-fermat.212-48-69-126.plesk.page
Regards
Hi John,
Please share screenshots to highlight the padding you are referring to.
Thanks.
Attached a screen shot - on scroll the header menu has a left justified black box around it and some of the content rows have a padding on the left and right handside - I've checked the margins/padding on the actual row and it looks ok.
Hi John,
Please try this css:
Thanks.
Thanks I added that CSS code and it didn't really seem to make much of a difference.
Also the menu looks to be behaving in boxed mode when it's under ultra wide resolution - so isn't full width and is left justified.
Regards
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
Thanks
ThemeNectar Support Team