Topic: How to prevent images from overlapping on smaller sized screens with Irregular « SeaTheme

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

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

Author

Posts
May 17, 2022 at 6:41 pm #27531

AMphoto
Participant

Purchased
Expired

Hi There –
We’re trying to “skinny” up some of the spacing of the images on my website main page, but are finding that if we adjust the “Top Spacing” too much…it will overlap on smaller size screens (so far smaller that 15″). Is there anyway to apply code that will prevent this from happening? See screen grab HERE: https://www.dropbox.com/s/w0ki4vmvz0fzlu3/Screen%20Shot%202022-05-17%20at%2012.38.40%20PM.png?dl=0

Thanks for your help!

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

May 18, 2022 at 1:54 am #27533

SeaTheme
Keymaster

Purchased
Expired

Hi there,
Welcome to SeaTheme forum.

I don’t understand your question. Can you give me more tips?

How can I find the issue on your website? Is homepage? Is the BROOKS RUNNING: F21 image overlapping?

ps:
The 2nd input of spacing is for mobile layout ,it is better not a negative number.

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

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

May 18, 2022 at 3:12 am #27535

AMphoto
Participant

Purchased
Expired

This is a recurring issue when laying out images on my homepage and individual project galleries. If I layout the page on my 15″ macbook pro – the layout looks perfect, but when the page is loaded on a smaller screen the images overlap.

See screenshots of the issue here: https://www.dropbox.com/sh/fc68wfukvv8by58/AAC80721KbhYpgjl86sn26_ha?dl=0

I wanted to know if there is a fix for this so that the images do not overlap at any browser size, since right now I’m having to use much more padding than I want to to prevent it happening.

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

May 18, 2022 at 1:40 pm #27536
SeaTheme
Keymaster

Purchased
Expired
Please try to use the custom CSS(“Appearance > Customize: Additional CSS”) to define the top spacing:
```
@media (min-width: 768px)  {
   .module-id-1652195287519 .module-inside {
       --top-mod: -60vh!important;
   }
}
```
Regards!
SeaTheme – FAQs – WordPress Customization – Facebook
WordPress Customization Service from $49 Only! Save your expensive time!
Author

Posts

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

You must be logged in to reply to this topic.