Change layout / blocks size
-
Hello!
I have encountered a major difficulty with the theme, in that I have no control over the width and padding of the containers. How can I control the layout of my page more specifically?
For example, here’s how the heading looks on this page (I did it with an Elementor widget):
And here’s how I need it to look:
I have photoshopped the screenshot to show what layout I want to achieve. In a similar way, I have this ugly extra space above the footer:
I have tried setting the page content width to 100vw, setting all paddings and margins to zero, and none of it had any effect.
I also tried adding custom CSS to get rid of the paddings (or whatever this is), but on inspecting the page I found that there are basically no paddings and I don’t really understand where the containers derive their width from. For example, as you can see on the screenshots below, the header has an excessive space, as do some other containers, and as the result the line “Imagine the future series” is just too far down.
There are so many different containers, I don’t know which one to target:
This is very counter-intuitive and annoying for me. Could you please explain how to do something about that? I don’t need such huge paddings — If I need them anywhere, I can just add them myself.
In general, I prefer my page to be a clean canvas on which I can set the content layout and paddings however I like. Is there a way to do it with this theme?
Thank you!
Kind regards,
The page I need help with: [log in to see the link]
-
Hi Ina,
Thanks for your response!
I am using the Full-Width (Page Builder) template:
And I have set all the Sections paddings and margins to zero. It was the first thing I did, actually. Still, none of it helps.
Also, I cannot change the background colour of this specific page to black for some reason, although I did that in Site Settings and I made sure ‘Disable Default Colors’ is deactivated:
I also couldn’t assign the colour with CSS, as there are no containers which would cover the whole individual page.
I had to set individual Sections backgrounds to black, but I still get the grey background of the page itself showing:
Would really appreciate it if you could look into this.
Thank you!
Kind regards,
Hi Ina,
Thank you so much for your response!I really appreciate you time and support. Sorry for replying late.
I’ve solved the problem with the extra gap at the bottom (above the footer), and after some hassle I managed to get rid of the one on top (under the header). Let me tell you the details.
- Gap at the bottom: Solved
I tried the code you sent me, and it didn’t affect the gaps. But you were right about an empty widget or block that should be removed. There was a Social Icons widget which was visible (and not editable) while inside the Customize editor, but hidden when looking from browser. I found its selector while still in Customize mode and hid it — now this gap is gone sitewide.
2. Gap on top: I’ve found the culprit and solved it too.
First, after some observations, I’ve managed to significantly reduce the gap my adding a custom CSS rule:
.entry-header{display: none;}Looks like the Page name was somehow affecting the gaps, although I previously turned it off in the Elementor settings.
BUT it turned out there’s another, smaller gap because of the #content default padding. Let’s look at this page as an example (https://new.artfabifa.com/cyberbase-project/).
Here’s what it was like at first (before hiding the .entry-header):
Here’s after I hid the .entry-header element. The gap’s still there, but narrower:
Here’s the element causing the issue:
Looks like the #content element has its own padding, with a fixed value. It’s probably set to adjust to the header, but my header is smaller than that.
As I was earlier changing the Header height (I set it to 8vh), I thought it would be easy to just set the #content’s padding to 8vh as well. That’s what I did, adding this line to the custom CSS:
#content {padding-top: 8vh !important;}It seems to work!
After I inserted the code:
Hope someone will find this helpful.
Kind regards,
- The topic ‘Change layout / blocks size’ is closed to new replies.
