-
Hi,
In both Blog and Portfolio there’s a padding to the right of the page, I guess either because of the feature image or since I used CSS to stack two footer widget one above the other I got this effect. I tried to resolve this by altering the CSS for the footer widgets but all tries ended up messing the future widget design.
-
Hi there,
Are you referring to this?
https://cln.sh/cYxFC2YF -
Yes!
-
It’s caused by your custom CSS, you’ve set Grid block’s
margin-righttoautowhich adds the extra margin on the right. Please remove this CSS, if you want to set a max-width for Grid block, wrap a container outside of it, and set themax-widthandmargin-left/margin-rightfor the container..gb-grid-wrapper { max-width: 1200px; margin-left: auto; margin-right: auto; } -
Hi Ying,
ah! I see…to wrap a container outside of the grid I will have to use a element module, correct?
-
No, just select the grid, and click the add to container button.
But I don’t think it’s necessary.
-
Well, when I remove that CSS the 2nd Footer Widget gets wider and doesn’t align with the logo and menu.
Both widgets get moved to the lfet
It also makes the Page Title move to the left outside the contained option.
Something I was expecting already because I remember that I added the above CSS because of the Footer Widgets.So removed the CSS again and I tried to add the grid to a container first in the Portfolio page to try it out and what happens is that the container is also slightly moved to the right, or has more padding in the left side.
I would like to solve and set this globally.
Maybe I don’t understand what you mean.
-
Add this:
.footer-widget-2 > .widget { flex: 1; } -
Hey Ying,
first let me tell you that I really appreciate the fact that you take time to reply and try to help me.
Then, this last line of code doesn’t do anything.
I removed the previous one you told me to.I added some padding in individual pages to gets things aligned, something I’ve never done before and I’m not sure is the best practice.
Then I also added some padding to the Hero Element to align with the Header.
When I remove the CSS regarding the footer widgets everything looks aligned.
The culprit of this mess is really this stacked footer thing.Again, somehow the line of code doesn’t affect anything, did I skip a step or something?
-
Maybe there’s another way to do all of this in a more simpler way:
.inside-footer-widgets div[class*=”footer-widget-“] {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}.footer-widgets .widget {
-webkit-box-flex: 1;
-ms-flex: 1 0 33%;
flex: 1 0 33%;
min-width: 250px;
}.footer-widget-2 > .widget {
flex: 1;
}.footer-widgets {
padding: 0;
margin-bottom: 0;
}.gb-grid-wrapper-e2d8bc37 {
margin-left: 40px;
margin-right: 40px;
}.footer-widgets-container.grid-container {
max-width: 100%;
} -
I’ll try again
-
Again, somehow the line of code doesn’t affect anything, did I skip a step or something?
I tested the code before I handed it to you, so it should work.
But I can not tell anymore, as your CSS has changed. it looks ok now.
-
Hi Ying,
I tried to replicate it by going back with the CSS and it still didn’t work.
But I decided to go page by page, setting by setting and check if everything was correct.
I had to rearrange some settings.
Then I deleted both widgets and started from scratch, first the widget with the website’s info and then the illustration.Pasted the widget CSS again and all worked like a charm.
only the Blog page has some content outside the header’s alignment.Can’t understand why but I can live with that for now.
So, thank you very much for your help and patience.
-
You are welcome 🙂
- You must be logged in to reply to this topic.