Docs

[jsn789]

Hello,

I hope all is well.

I have a problem with the centralization of image elements inside a section – #guests. They look okay on mobile, but on a tablet, they are not getting centered.
Would you be able to help with that?

What is more, I would like to hide the background image of the #guests section on mobile/tablet devices.

Looking forward hearing back from you.

P.S. I will put the access details in a private message below.

Regards,

Yasen

[jsn789]

This reply has been marked as private.

[Nabeel A]

Hi Yasen,

Thanks for writing in! Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

@media (min-width: 480px) and (max-width: 767px) {
  #guests .x-column.x-sm {
    float: left !important;
    width: auto !important;
    margin-right: 4% !important;
  }
}

Let us know how this goes!

[jsn789]

Hey,

Thanks for getting back so quickly!

Unfortunately still the same on a tablet (ss attached).

[Lely]

Hello Yasen,

Please use the following custom CSS:

@media (max-width: 767px) and (min-width: 480px){
#guests .x-column.x-sm {
    float: none;
    width: 100%;
    display: block;
    margin: 0 auto;
    max-width: 300px;
}
}

Or this:

@media (max-width: 767px) and (min-width: 480px){
#guests .x-column.x-sm .x-img {
    float: none;
    width: 100%;
    display: block;
    margin: 0 auto 20px;
}
}

Please note that parallax background is not suitable for this view. Your content will overflow beyond your background image. We can use background color instead or longer or vertical type of image.

Hope this helps.

[Author]

Posts