full width slider caption doesn't fit on mobile - Support | Kriesi.at

Tagged: slider caption on mobile

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

Author

Posts
September 30, 2024 at 4:11 pm #1468115

aboutnina
Participant

Hello Support,
I have created a layer slider with one image and caption on the frontpage of my website. It looks just right on desktop but is totally cut off on mobile portrait view and covers the person in portrait orientation. How can I edit the size and position of the caption for mobile? It should look the same as on desktop.

2nd question: how can I change the styling of headings for posts?

Thank you!

October 1, 2024 at 5:40 am #1468143
Ismael
Moderator
Hey aboutnina,

Thank you for the inquiry.

Please try to add this css code to adjust the font size of the caption title on mobile view:
```
@media only screen and (max-width: 767px) {
  #top #wrap_all .avia-slideshow .av-slideshow-caption.av-m1g8o6g7-f7efce2774fcf0ca4bccdacd45c3be64__0 .avia-caption-title {
    font-size: 22px;
  }
}
```
Best regards,
Ismael
October 1, 2024 at 10:33 am #1468158

aboutnina
Participant

Thanks, Ismael, I added and saved the code to the Quick CSS under General Styling, but I don’t see any difference.

October 1, 2024 at 11:21 am #1468160

aboutnina
Participant

Actually I do, the h2 in the text are no longer blue!

October 2, 2024 at 4:27 am #1468237
Ismael
Moderator
Hi,

Thank you for the update.

We adjusted the css code a bit. Please try it again:
```
@media only screen and (max-width: 767px) {
  #top #wrap_all .avia-slideshow .av-slideshow-caption.av-m1g8o6g7-f7efce2774fcf0ca4bccdacd45c3be64__0 .avia-caption-title {
    font-size: 22px !important;
  }
}
```
Regarding the text color, please edit the slide, then configure the settings in the Styling > Colors panel.

Best regards,
Ismael
October 4, 2024 at 11:42 am #1468420

aboutnina
Participant

Thanks a lot, much better! The only problem that remains is the caption covers the person. How can I move it further to the right?

October 4, 2024 at 4:44 pm #1468434
Rikard
Keymaster
Hi,

Please try this CSS as well:
```
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .home #full_slider_1 .slideshow_caption {
    left: 20%;
    width: 80%;
    padding: 0;
  }
}
```
Best regards,
Rikard
October 4, 2024 at 4:50 pm #1468438

aboutnina
Participant

Thank you, I pasted it, but unfortunately no change.

October 5, 2024 at 11:11 am #1468470
Rikard
Keymaster
Hi,

I see the changes applying on my end, if you want them to apply to all mobile screen sizes then you can try this instead:
```
@media only screen and (max-width: 767px) {
  .home #full_slider_1 .slideshow_caption {
    left: 20%;
    width: 80%;
    padding: 0;
  }
}
```
Best regards,
Rikard
October 7, 2024 at 6:26 pm #1468594

aboutnina
Participant

Now I also see it on the small screen, much better thank you. However, when I turn the small screen into landscape mode the font of the top part of the caption (pink) becomes much smaller than the bottom part (white), which looks very strange. Can you see that? Thanks for your time

October 8, 2024 at 4:49 am #1468623
Ismael
Moderator
Hi,

Thank you for the update.

Please include this css rule inside the css media query (max-width: 767px) to adjust the font size of the caption content:
```
#top .avia-slideshow .av-slideshow-caption.av-m1g8o6g7-f7efce2774fcf0ca4bccdacd45c3be64__0 .avia-caption-content p {
    font-size: 18px;
}
```
Best regards,
Ismael
October 9, 2024 at 4:01 pm #1468728

aboutnina
Participant

Thanks again, Ismael. However, on a small phone screen I don’t see the difference, the bottom font is still bigger than the top.

October 10, 2024 at 6:52 am #1468763
Ismael
Moderator
Hi,

Did you place the code inside this css media query?
```
@media only screen and (max-width: 767px) {
 // place the code here
}
```
You can also adjust the font size by editing the slide. Go to Styling > Font Sizes, then adjust the Caption Content Font Size > Font Size for small screens (480px to 767px, e.g., Tablet Portrait) settings. Click the device icon to adjust the font size for different screen sizes.

Best regards,
Ismael
October 11, 2024 at 1:06 pm #1468918

aboutnina
Participant

This is what it looks like:

@media only screen and (max-width: 767px) {
#top #wrap_all .avia-slideshow .av-slideshow-caption.av-m1g8o6g7-f7efce2774fcf0ca4bccdacd45c3be64__0 .avia-caption-title {
font-size: 22px !important;
}
}
#top .avia-slideshow .av-slideshow-caption.av-m1g8o6g7-f7efce2774fcf0ca4bccdacd45c3be64__0 .avia-caption-content p {
font-size: 18px;
}
@media only screen and (max-width: 767px) {
.home #full_slider_1 .slideshow_caption {
left: 20%;
width: 80%;
padding: 0;
}
}

October 12, 2024 at 11:40 pm #1469002
Mike
Moderator
Hi,
Thanks for the link to your page, when I check I see this:

I recommend this css:
```
@media only screen and (max-width: 479px) { 
	#top.home #wrap_all #full_slider_1 .av-slideshow-caption .avia-caption-content p {
		font-size: 12px;
	}
	#top.home #wrap_all #full_slider_1 .avia-caption-title {
		font-size: 15px;
	}
}
```
or this result for small screens (320px):

and this for normal screens (425px)

Please adjust to suit

Best regards,
Mike
Author

Posts

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

You must be logged in to reply to this topic.

full width slider caption doesn’t fit on mobile