Show Sliders Auto Sizing

[scrambler]

blank post as the forum appears to open in a blank third page instead of my last post

[GDGerlach344]

Your revised CSS worked. The slider captions are now showing up on my Portrait oriented phone.

I created a 2nd slider using the same settings as the first. There are fewer photos on the 2nd slider & I was able to adjust the two widths so the grey box looks good on both my desktop & phone. I also had to increase the mobile font size to 120%. Everything looks good on the phone but the text is too small and not centered on the desktop.

Here’s the link to the 2nd slider and the current CSS

https://gerlachproductions.com/studio-gear/

.this-slider .atwk-caption-overlay {bottom:10px;right:auto;width:7.00%;padding:0.3em;}

@media screen and (max-width: 580px) {
.this-slider .atwk-caption-overlay {
display:block;
font-size: 100% !important
}

.this-slider .atwk-caption-overlay {
width: 6.49% !important;
padding-left: 10px !important;
padding-right: 10px !important;
text-align: center
}
}

[scrambler]

Add a font size property to the first rule, the default value is 80%, so increase from there

.this-slider .atwk-caption-overlay {bottom:10px;right:auto;width:7.00%;padding:0.3em;font-size:90%;}

[GDGerlach344]

Once again, thanks for your patience. I added text-align: center; to center it.

One more thing… I really like the bold thicker font on slider #1. How do I get the slider #2 font to look like that? I didn’t see anything in the slider #1 CSS that looked any different than the slider #2 CSS regarding the font.

Here’s the link to slider #1 & its CSS:

https://gerlachproductions.com/

.this-slider .atwk-caption-overlay {bottom:10px;right:auto;width:3.78%;padding:0.3em;}

@media screen and (max-width: 580px) {
.this-slider .atwk-caption-overlay {
display:block;
font-size: 65% !important
}

.this-slider .atwk-caption-overlay {
width: 3.49% !important;
padding-left: 10px !important;
padding-right: 10px !important;
text-align: center
}
}

[scrambler]

I am not sure why it is picking the bold property, but you can force it in the CSS

.this-slider .atwk-caption-overlay {bottom:10px;right:auto;width:3.78%;padding:0.3em;font-weight:bold;}

[Author]

Posts