Access gridders left and right frame through addtional media query for very big screens
-
Hi there,
I was wondering if there's a way to change the gridders left/right frame of a page with an additional media query.
I really like the way how my new page is starting to look but on very large screens i would like to have a bigger left and right margin.
I would just give some margin to the grid or grid-inner class but because I use a lot of different row background colors and one full width background video that won't work.I tried my best to decipher the css in the inspector but I couldn't find a solution on my own.
best regards,
Julian -
Dear Julian @julianbauer
I think i understand, however would you be able to post a link to your website and even better an example of what you wish to achieve? ( can just be a rough sketch :)
Then i can probably help more efficiently!
Best wishes
Richard -
Dear Richard
this is the website I'm currently working:
https://lay.tristesse.ch/At the moment the content just grows and shrinks with the size of the Browser window. Wich is perfectly fine for example a 15" Screen.
This is what that looks like:
What I'd like to achieve ist that the content stops growing after a certain Browser width and forms a column in the middle, without having white Borders left and right, like in this Mockup:
kind regards,
Julian -
Dear Julien @julianbauer
This is possible but would need some tinkering to get right with a few elements. Because the overall row is what set's you background colour you don't want to apply restrict this width, however the row-inner is the next element nesting within that could be targeted:
.row-inner { max-width: 600px; margin-left: auto; margin-right: auto; }
This is an exaggerated example but it will give you the idea
Best wishes :)
Richard -
Dear Richard
Thanks for your help, that was exactly what I was looking for!
Best wishes,
Julian -
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it