[Support request] Different separating space mellow theme mobile/desktop

[Paul]

I am using the mellow theme. That has a container which is smaller than the header and the top of the container “ends” somewhere in the header.
I would want it ending at a higher position (closer to the top of the screen), but the strange thing is, that I can’t bring the slider for separating space lower than 0, and that is still not high enough. However, I can enter a negative number (and not use the slider), and that works fine. However, On mobile devices, this is way to high.
So I need to have a different setting for mobile and desktop. Found a piece of css code, but it doesn’t work on mobile.
Why can’t the slider go lower than zero and how can I solve this problem?
Thanks!
Paul

[Tom]

Hi there,

Did you get this sorted?

The page is brought up into the header with CSS in “Customize > Additional CSS”.

At the bottom there, it has some mobile CSS which brings it up -75px vs the -100px on desktop.

Let me know 🙂

[Paul]

Hi Tom,
Thanks for your quick reaction.
Yes I found it and that works on mobile devices. By changing it to

@media (max-width: 768px) {
#page {
margin: -130px 15px 0 15px;
}

on a smartphone it now looks ok.
But I can’t get it to work on other devices.
When I go to appearance / customise/ layout / container
and then change the separating space from +40 to 0. it looks ok in the preview: the container starts at a higher point. Then I publish. Then in the browser I can see that the container ended up somewhat higher. That’s ok.
At the same time, I see that the container changes in the phone as well. So I adjust the value in the css for the mobile device again. So far so good.
Now next step: try to get it a bit higher on desktop screen.
Go to customise / layout / container again and enter a negative value of -40 for separating space. Looks okay in the preview. I press publish.
Then I look at the result in an incognito browser: the container appears LOWER instead of higher. I need to adjust the value for mobile as well.
I can’t get it to work properly at the container height I want on desktop.It seems that minimum value is 0 and negative values look ok in preview, but the results doesn’t work in the browser afterwards.
What am I doing wrong?

Thanks
Paul

[Tom]

I wouldn’t use the Separating space option at all – it’s not intended for negative numbers, as it applies to other spacing throughout the theme.

It’s best to tweak the CSS provided so it suits your design. You can add more media queries and tweak the values so it works across different devices.

[Author]

Posts