Issues slider images sizing / issus responsiveness

Activello
1

Hi there,

Thanks for the beautiful theme Activello :)!

I’m having some issues with the theme on my blog www.surfologie.nl

  1. The slider :
    The two first pictures in my slider are fine, but on the third picture, the slider becomes bigger and the image is enlarged in an ugly way. How can I get the slider to be the same size for all pictures -while keeping images of good quality?

  2. Mobile version :
    On the mobile version, the slider doesn’t slide, it just stays on the first picture, and the titles of articles that are supposed to be shown on the slider are nowhere to be seen.

How can I resolve this issues?
Everything was working perfectly until I switched from my ancient webhosting service to my current one.

Thanks in advance for your help.

Laura

2

Hi Laura,

I hope you are well today and thank you for your questions.

1. The slider : The two first pictures in my slider are fine, but on the third picture, the slider becomes bigger and the image is enlarged in an ugly way. How can I get the slider to be the same size for all pictures -while keeping images of good quality?

Please try regenerating thumbnails on your site using the following plugin.

2. Mobile version : On the mobile version, the slider doesn’t slide, it just stays on the first picture, and the titles of articles that are supposed to be shown on the slider are nowhere to be seen.

I have tested it but didn’t see the issue so could you please share the screenshot of it?

Best Regards,
Movin

3

Hi Movin,

Thanks so much for your fast and clear reply!

  1. The first problem is now (partly) resolved: The plugin has indeed allowed me to get all the images of my slider to be of the same size (thanks!). But now I am wondering how I can get “the whole” image to be shown in the slider. Right now, the images are ‘cut’, so the lower part is not visible in the slider. It might be hard for you to see with my current pictures but let’s say that if I had a picture of a car in my slider, you would not see the wheels. How do I get the whole picture in the slider?

  2. I have attached a screenshot of the Desktop version and a screenshot of the Mobile version to show you what I mean. So two problems here: the mobile version does’nt show the text that you see on the slider and the slider doenst “slide” automatically to the next image.

Looking forward to hear how to solve this.

Thanks again for your help!

Laura

4

hey there :slight_smile:

  1. Even on your screenshots, i can see images is displayed in the container without cutting bottom or top portion of the image. the same picture I can see in the browser, full-size images are displayed in the slider container:
    https://surfologie.nl/wp-content/uploads/2018/02/20171026_193041-1920x550.jpg
    https://surfologie.nl/wp-content/uploads/2018/02/oosterschelde-2398636_1920-1920x550.jpg
  2. Yes, indeed, this is by default but we can fix this by this CSS code:
@media (max-width: 768px){
.flex-caption {
    display: block;
}
.flex-caption h2 {
margin-bottom: 1px !important;
}
div.flex-caption {
    bottom: 0%;
}
}
5

Hi,

Thanks for your reply.

Problem number 2 has been resolved with the CSS code, thanks a lot! So now the slider on the mobile versions shows the titles/subtitles as well!
But now, problem 1 is even more apparent: although you can now see these titles/subtitles in the slider, you can’t read them well because they are cut off at the top (see screenshot).
How should I fix this?

Thanks again,
Laura

6

Hi

Thank you :slight_smile:
ok, lets modify your css code little bit:

@media (max-width: 768px){
.flex-caption {
display: block;
}
.flex-caption h2 {
margin-bottom: 1px !important;
font-size: 19px;
}
div.flex-caption {
bottom: 0%;
}
.flex-caption .read-more a {
font-size: 11px;
}
.flex-caption .post-categories {
padding-bottom: 1px;
margin-bottom: 6px;
}
}