Topic: Mobile layout: spacing « SeaTheme

This topic has 10 replies, 2 voices, and was last updated 3 years, 6 months ago by SeaTheme.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
November 1, 2022 at 12:23 pm #28500

HF1
Participant

Purchased
Expired

Since one of the updates, my mobile layout no longer has equal spacing on new portfolio pages I create. [I want to enable mobile layout, not have the desktop layout on a phone.]
Is there a way of quickly making spaces between images the same across all my content on mobile, as you could when I first bought this theme a few years ago? I have many pages and complicated settings or coding for separate pages would take a long time in future.
For example, https://www.hollyfalconer.com/portfolio/turner-prize-nominees-tate-etc-magazine/

WordPress Customization Service from $49 Only! Save your expensive time!

November 1, 2022 at 3:03 pm #28501
SeaTheme
Keymaster

Purchased
Expired
Hi there,
Welcome to SeaTheme forum.

It is possible by custom CSS(“Appearance > Customize: Additional CSS”), like:
```
@media (max-width: 767px) {
 .single-ux-portfolio .bm-builder .module>.module-inside.single-image-inside {
         --top-mod-m: 50px;  --bottom-mod-m: 0px;
 }
}
```
Regards!
SeaTheme – FAQs – WordPress Customization – Facebook
WordPress Customization Service from $49 Only! Save your expensive time!

November 2, 2022 at 9:13 am #28505

HF1
Participant

Purchased
Expired

Hello, thanks for the fast reply!

This has unfortunately not worked, and has also now made some other pages have different spacing on a phone. Eg: https://www.hollyfalconer.com/personal-editorial/

Is there any other coding I could try?
Thanks

WordPress Customization Service from $49 Only! Save your expensive time!

November 3, 2022 at 11:39 am #28506
SeaTheme
Keymaster

Purchased
Expired
Please update the above CSS as:
```
@media (max-width: 767px) {
 .bm-builder .module>.module-inside.single-image-inside {
    --top-mod-m: 50px!important;
    --bottom-mod-m: 0px!important;
 }
}
```
Regards!
SeaTheme – FAQs – WordPress Customization – Facebook
WordPress Customization Service from $49 Only! Save your expensive time!

November 3, 2022 at 3:03 pm #28508

HF1
Participant

Purchased
Expired

Thank you so much! That has worked.

WordPress Customization Service from $49 Only! Save your expensive time!

November 10, 2022 at 4:28 pm #28571

HF1
Participant

Purchased
Expired

Hello,

I have one more question. My final issue is that on a mobile phone, I want to have my Home page look the same as my website on a laptop. But the top of images are lining up rather than looking scattered/ different heights. Here’s where I mean for you to compare laptop VS phone: https://www.hollyfalconer.com/

Thanks,
Holly

WordPress Customization Service from $49 Only! Save your expensive time!

November 11, 2022 at 12:52 am #28577

SeaTheme
Keymaster

Purchased
Expired

Hi

I checked your website, did not find the issue. The mobile layout does be the same as laptop now.
I’m not sure if I understand your question correctly.Can you paste a screenshot to explain it? thanks

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

WordPress Customization Service from $49 Only! Save your expensive time!

November 11, 2022 at 11:01 am #28582

HF1
Participant

Purchased
Expired

Hello,

Sure! No worries. Here’s the difference:

Laptop: https://snipboard.io/DLgCEf.jpg

Phone: https://snipboard.io/YSK4cd.jpg

Thanks,
Holly

WordPress Customization Service from $49 Only! Save your expensive time!

November 11, 2022 at 2:59 pm #28584
SeaTheme
Keymaster

Purchased
Expired
Thanks
It is caused by the above custom CSS:
```
@media (max-width: 767px) {
 .bm-builder .module>.module-inside.single-image-inside {
    --top-mod-m: 50px!important;
    --bottom-mod-m: 0px!important;
 }
}
```
You can update it as:
```
@media (max-width: 767px) {
 body:not(.home) .bm-builder .module>.module-inside.single-image-inside {
    --top-mod-m: 50px!important;
    --bottom-mod-m: 0px!important;
 }
}
```
Regards!
SeaTheme – FAQs – WordPress Customization – Facebook
WordPress Customization Service from $49 Only! Save your expensive time!

November 11, 2022 at 5:11 pm #28587

HF1
Participant

Purchased
Expired

Hello,
Thanks so much for this. That’s made it better, but it’s not quite fixed. The images aren’t in the same position relative to each other on a mobile phone.
See these examples:

Laptop: https://snipboard.io/GEKRTF.jpg
Phone: https://snipboard.io/JIfzmy.jpg

Looking forward to hearing your thoughts, thanks!

WordPress Customization Service from $49 Only! Save your expensive time!

November 12, 2022 at 4:59 am #28588

SeaTheme
Keymaster

Purchased
Expired

Hi,

This layout cannot be exactly the same as the desktop because of the spacing settings, you can only approximate the same by adjusting the top/bottom spacing. You can define the top spacing for mobile for the image on the left(e.g. change 90 as 50)

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

WordPress Customization Service from $49 Only! Save your expensive time!
Author

Posts

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.