Fix picture with padding on mobile - Support | Kriesi.at

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

Author

Posts
May 8, 2023 at 6:57 pm #1406783

goldieslongbeach
Participant

The picture above lip blushing under services is overlapping some text on mobile. I added a -150px row margin for a staggered effect that a like but doesn’t work on mobile. Any suggestions on how to resolve?

May 9, 2023 at 9:16 am #1406849
Rikard
Keymaster
Hey goldieslongbeach,

Please try the following in Quick CSS under Enfold->General Styling:
```
@media only screen and (max-width: 990px) {
.responsive #top #wrap_all .flex_column.av-3dti8u-45b97b3fd0734351408ca46c6db5adc2 {
  margin-top: -100px;
}
}
```
Best regards,
Rikard
May 9, 2023 at 7:24 pm #1406929

goldieslongbeach
Participant

Thanks, I tried that but things are still overlapping. See Screenshot in private.

May 10, 2023 at 12:14 pm #1406971

Rikard
Keymaster

Hi,

Try adjusting the margin-top value down a bit, maybe even down to 0.

Best regards,
Rikard

May 10, 2023 at 6:10 pm #1407029

goldieslongbeach
Participant

Thanks for the suggestion. I went ahead and made it 0 but things are still overlapping. I tried other amounts as well as things just stayed the same.

May 11, 2023 at 6:06 am #1407072
Ismael
Moderator
Hi,

Thank you for the update.

The css code above should have worked. Please try replace it using this css code.
```
@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
  .responsive #top #wrap_all .flex_column.av-3dti8u-45b97b3fd0734351408ca46c6db5adc2 {
    margin-top: 0;
    margin-bottom: 0px;
  }
}
```
You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css code and purge the cache.

Best regards,
Ismael
May 11, 2023 at 6:06 am #1407073
Ismael
Moderator
Hi,

Thank you for the update.

The css code above should have worked. Please try replace it using this css code.
```
@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
  .responsive #top #wrap_all .flex_column.av-3dti8u-45b97b3fd0734351408ca46c6db5adc2 {
    margin-top: 0;
    margin-bottom: 0px;
  }
}
```
You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css code and purge the cache.

Best regards,
Ismael
Author

Posts

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

You must be logged in to reply to this topic.