- This topic has 25 replies, 3 voices, and was last updated 6 months, 3 weeks ago by
Leo.
-
AuthorPosts
-
June 17, 2020 at 1:05 am #1330899
Stephen
Hello,
I would like your help with some padding issues on a site I’m working on for a client – in8active.com.
I have used the following CSS to make the navigation bar padding line up with the container:
@media only screen and (min-width: 760px) {
.inside-navigation {
padding-left: 40px;
padding-right: 35px;
box-sizing: border-box;
}
}Unfortunately, a little glitch seems to make it not line up when it reaches a certain viewport size (e.g. on my 24inch monitor the nav bar doesn’t line up with the content but it does on my laptop screen). The footer widgets and bar also don’t line up on large screens but do on my laptop.
Please help!
June 17, 2020 at 8:57 am #1331539Leo
StaffCustomer SupportHi there,
Try this CSS instead:
body .main-navigation .inside-navigation.grid-container { max-width: 1400px; }
Change the px number to match your Elementor container width.
You should also be able to do this within the customizer:
https://docs.generatepress.com/article/container-width/Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 18, 2020 at 12:51 am #1332219Stephen
Hi Leo,
Thanks for your help. Afraid this doesn’t quite do what I want.
I’m happy with how the navigation bar is padded I just want to make the footer line up with the navigation on large displays.The code you’ve sent makes the navigation padding too small on smaller viewports (e.g.my laptop screen).
Sorry if I’m not explaining very clearly..
How it looks on a laptop screen is exactly what I want it to be like on large monitors too. Unfortunately it just goes all out of line on larger screens.
June 18, 2020 at 8:42 am #1332911Leo
StaffCustomer SupportCan you make sure the inner footer width is set to contained?
https://docs.generatepress.com/article/footer-layout/Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 18, 2020 at 8:53 am #1332939Stephen
Hi Leo,
Yes the inner footer width is definitely set to contained. I have, however, added padding to the nav bar. I just need to get the footer to line up with it on large displays.June 18, 2020 at 9:05 am #1332960Leo
StaffCustomer SupportTry this:
.site-footer .footer-widgets-container .inside-footer-widgets { padding-left: 30px; padding-right: 40px; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 18, 2020 at 9:08 am #1332964Stephen
I’ve added that. That makes it line up on large displays but also makes it not line up on small screens. I’ve published it so you can have a look.
It also makes it not line up with the footer bar below it
June 18, 2020 at 9:15 am #1332979Stephen
With this code I can get it all to line up on large monitors but then as soon as you make the browser window smaller everything goes out of line completely. It’s driving me crazy! Hope you can help me get to the bottom of this..
The only thing that gets it to line up on both laptops and large monitors is making the footer width and the inner footer width both ‘contained’ but then it doesn’t look right.
@media only screen and (min-width: 760px) {
.inside-navigation {
padding-left: 40px;
padding-right: 35px;
box-sizing: border-box;
}
}
@media only screen and (min-width: 760px) {
.site-footer .footer-widgets-container .inside-footer-widgets {
padding-left: 40px;
padding-right: 35px;
}
}
@media (min-width: 768px) {
.site-info {
padding: 20px 20px 0px 100px;
}
}June 18, 2020 at 11:01 am #1333079Leo
StaffCustomer SupportMaybe we are going in the wrong direction.
Is the goal to have a wider content container width and narrower header/footer widths?
If so try setting the header/footer width you want using the customizer option:
https://docs.generatepress.com/article/container-width/Then create a layout element for the content container width:
https://docs.generatepress.com/article/layout-element-overview/#content-1Then we can avoid all the CSS.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 19, 2020 at 1:17 am #1333670Stephen
I’m afraid this still doesn’t work unfortunately.
The navigation bar glitches slightly still and goes out of line on large screens. Now that I’ve set the footer padding to line up on large displays, it doesn’t line up on smaller screens.It’s all live here – https://www.in8active.com/
I’m sure there must be an easy way around this I just can’t figure it out. My site was also built with GeneratePress (https://www.cleardesign.studio/) and padding is all good on it. However, I have the footer width set to ‘contained’ which wouldn’t work on IN8 Active site unfortunately.June 19, 2020 at 1:25 am #1333679Stephen
Perhaps this issue has something to do with using the sticky nav bar as the header?
It seems a bit perplexing that lining up the navigation, content and footer is so difficult. I would have thought most users would want thatJune 19, 2020 at 11:03 am #1334449Leo
StaffCustomer SupportWith your current set up, can you
– remove your custom CSS:
– set even padding for the footer widgets.
Then the two should line up perfectly:
https://www.screencast.com/t/M6AUOarlDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 19, 2020 at 2:43 pm #1334734Stephen
If I remove the CSS then the padding on the nav bar is almost non-existent on small screens and if I add even padding it is only evenly padded on large displays and as soon as you make the browser size smaller it goes out of line!
I’m a bit gutted that we haven’t reached a solution..
June 19, 2020 at 2:44 pm #1334736Stephen
I feel like I’ve tried everything but with no good result
June 19, 2020 at 2:59 pm #1334755Leo
StaffCustomer SupportI guess I’m a little confused about what the final result you are looking for.
Usually those elements line up nicely and responsive without any additional CSS.
Can you take a look at this site and let me know if this is the bahaiour you’d like to see? or something is wrong with this too?
http://gpsites.co/marketer/Thanks for your patience – we will get it resolved.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.