Mobile screen result (image)

Hey Aubin,

Thank you for the inquiry.

Are you referring to this thread? https://kriesi.at/support/topic/mobile-screen-result/

What do you mean by “test Is too small”? Would you mind providing a screenshot of the issue? You can use platforms like Savvyify, Imgur or Dropbox to upload and share the screenshot.

Best regards,
Ismael

Hi,

Are you trying to increase the height of the slider? If so, then you can add this css code:

@media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .avia-slideshow.av-lu5z97j3-d1f957c8c38e449b8b56e5cb4753112f .avia-slideshow-slide img {
    min-height: 500px;
    object-fit: cover;
  }
}

Please note that this may partially cut off the images. Would you mind providing a screenshot of how you would like it to display on mobile view?

Best regards,
Ismael

Hi,

We ca’t find the “livraison en Afrique” page. For the Financement page, you can include this css code:

.av-m7nj2xd7-f8dc5edf704b129f594536c49dabd9b8.avia-slideshow li img {
    height: 300px;
    object-fit: cover;
    object-position: right;
}

Another option is to hide the current slider on mobile view by editing the Element Visibility options in the Advanced > Responsive panel, then add another slider with an image that is specifically resized for mobile view.

Best regards,
Ismael

Hi,
I don’t find “Livraison en Afrique” on your page, please explain in full detail, perhaps a screenshot would help.

Best regards,
Mike

Hi,

For the “Livraison en Afrique” page, please add this css code to adjust the size of the slider image on mobile view:

#top .av-m7utj0fm-55a4085e08fb8dd95eeb6325426a31b7 li img {
    height: 300px;
    object-fit: cover;
    object-position: right;
}

Best regards,
Ismael

Hi,

Did you add the code in the Enfold > General Styling > Quick CSS field? Please provide the login details in the private field so that we can test the modifications.

Best regards,
Ismael

Hi,

We modified the code in the Quick CSS field:

@media only screen and (max-width: 768px) {
  #top .avia-slideshow.av-lu5z97j3-d1f957c8c38e449b8b56e5cb4753112f .avia-slideshow-slide img {
    min-height: 500px;
    object-fit: cover;
  }

  #top .av-m7nj2xd7-f8dc5edf704b129f594536c49dabd9b8.avia-slideshow li img,
  #top .av-m8474mmq-b8b082188475e1a03955aab66d3e8639 li img,
  #top .av-m7utj0fm-55a4085e08fb8dd95eeb6325426a31b7 li img
   {
    height: 300px;
    object-fit: cover;
    object-position: right;
  }
}

Result:

View post on imgur.com

We also disabled the Enfold > Performance > File Compression settings temporarily. You can enable it back when you’re done editing the site.

Best regards,
Ismael

Hi,

We adjusted the css for the slider in the livraison-en-afrique page. Please make sure to purge the cache before testing.

Best regards,
Ismael

Hi,

We added the modification for the home page.

View post on imgur.com

If you need additional help with modifications, we recommend hiring a freelance developer or reaching out to our partner, Codeable. Please check the link below.

— https://kriesi.at/contact/customization

Best regards,
Ismael