Mobile spacing, insert gap between two elements

[lypa]

Dear Themeco Support Team

We noticed that on pur mobile version, some spacing is different after the latest updates. We would like to re-create the spacing and insert a space (gap) again here in the mobile version:

Between the button and the slider element. Now there is no space at all and the slider kind of “sticks” to the button.

Would you mind giving us advice on that? Thank you.

Kind Regards,
lypa

[ruenel]

Hello @lypa,

Thanks for writing in!

To resolve your issue, please update your button shortcode and use this instead:

[button class="mbm" href="../wp/aktuell" title="zu den Beiträgen"]
[icon type="chevron-right"]ALLE BEITRÄGE[/button]

Take notice that I added class="mbm" in your shortcode which means that there will be a medium bottom margin added to the button when rendered into the page. The medium margin will create a gap when the page is viewed in smaller screens.

Hope this helps.

[lypa]

Hi Rue Nel,

Thank you for helping. I applied the button class. And it has a little space between the bottom and the next element. Vertically centered between the elements the button would look even better. Is there a way to do that like playing with margin-top etc.? I found this shortcode above the button and removed it:
[visibility type="visible-phone"][gap size="2em"][/visibility]
Since it seemed to make the top-margin bigger on mobile. Is that correct?

Also, I applied these changes to our French (www.morga.ch/fr) and English (www.morga.ch/en) start pages, but it does not seem to work there (still no gap between button and other elements). Would you mind checking this once more? Thank you.

Kind REgards,
lypa

[christian]

Hey lypa,

Regarding this:

@lypa

I applied the button class. And it has a little space between the bottom and the next element.

If mbm is still little. Try using mbl which is the largest bottom margin. For more utility classes, please see https://theme.co/apex/forum/t/customizations-css-class-index/207

@lypa

Is there a way to do that like playing with margin-top etc.?

For top margin, you can use the style attribute and use inline CSS like [button style="margin-top:10px".... You can adjust 10px as per your spacing needs. You can learn more CSS in sites like https://www.w3schools.com/css/

@lypa

I found this shortcode above the button and removed it:
[visibility type=“visible-phone”][gap size=“2em”][/visibility]
Since it seemed to make the top-margin bigger on mobile. Is that correct?

Yes.

@lypa

Also, I applied these changes to our French (www.morga.ch/fr) and English (www.morga.ch/en) start pages, but it does not seem to work there (still no gap between button and other elements)

I see the bottom margin of the button in both pages is the same but the difference is the top margin and it’s not coming from the button but the paragraph tag in the News headline.

Remove the p tags wrapping the text.

Add your inline style in the Custom Headline shortcode instead. You already know this as I’ve mentioned this for the Button shortcode above.

Hope that helps.

[lypa]

Hi Christian

Thank you for your reply. So I removed the p tag wrapping the headline “News” in the English version as you advised and added the inline style in the Custom Headline shortcode instead. It looks like this now:

[custom_headline style="text-align:center" level="h2" looks_like="h3"]
News
[/custom_headline]

Hope, the syntax is correct like this? I compared it to the button syntax suggested by you.

But on mobile, the button still “sticks” to the slider element below without any margin at the bottom, here is a screenshot from my iPhone:

Also, like you can see on the screenshot, there is a “scroll-to-top” anchor button showing at the bottom of the page. This is strange, because I deactivated that button a few days ago and it should not be there (it is not showing in the German version, though, our main language). To me, it seems like there is some conflict with the translations. Would you mind taking another look at it? Thank you, I really appreciate your efforts.

Best Regards,
lypa

[christian]

Hey Lypa,

There’s a space below the button when I checked and there’s no scroll to top button. If you have spacing problems, please remember the utility classes I’ve mentioned previously.

Please clear your browser cache also.

Thanks.

[lypa]

Hi Christian

Thank you for helping. Is your picture from the responsive preview in the browser? Because if I check the issue in the mobile preview in Chrome, I can not see it either. And I cleared my cache as well.

But when I look at the page on my iPhone, there still is no margin between the “All News” button and the element below it, see:

In German (main language), it looks fine on my phone, see:

Would you mind taking another look at that? And yes, I have tried to use the “mbl” class, but it did not help with this issue.

Kind Regards,
lypa

[ruenel]

Hello Lypa,

I have inspected your other language page. It does not have the “mbm” or “mbl” class in the button.

You will need to edit all of the language pages and add the class in your button.