- This topic has 25 replies, 3 voices, and was last updated 3 years, 9 months ago by Leo.
-
AuthorPosts
-
June 17, 2020 at 1:05 am #1330899Stephen
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 #1331539LeoStaffCustomer 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/June 18, 2020 at 12:51 am #1332219StephenHi 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 #1332911LeoStaffCustomer SupportCan you make sure the inner footer width is set to contained?
https://docs.generatepress.com/article/footer-layout/June 18, 2020 at 8:53 am #1332939StephenHi 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 #1332960LeoStaffCustomer SupportTry this:
.site-footer .footer-widgets-container .inside-footer-widgets { padding-left: 30px; padding-right: 40px; }
June 18, 2020 at 9:08 am #1332964StephenI’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 #1332979StephenWith 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 #1333079LeoStaffCustomer 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.
June 19, 2020 at 1:17 am #1333670StephenI’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 #1333679StephenPerhaps 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 #1334449LeoStaffCustomer 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/M6AUOarlJune 19, 2020 at 2:43 pm #1334734StephenIf 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 #1334736StephenI feel like I’ve tried everything but with no good result
June 19, 2020 at 2:59 pm #1334755LeoStaffCustomer 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.
-
AuthorPosts
- You must be logged in to reply to this topic.