Show Sliders Auto Sizing

[GDGerlach344]

First of all, I’d like to thank you for your exceeding amount of patience!

Yes… text vertical centering is now working and the height of the box increases for the two line captions. The only other tweak I’d like to do is decrease the margin/padding above and below the text. Possible?

[scrambler]

Just add a padding property to the slider rule. The current padding is set at .8em, so if you use .4em like below it will be half.

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

If you want different values for top / bottom and left / right, you can use two values (first value is top/bottom, second if left/right)

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

[GDGerlach344]

I removed the Top property and everything was perfect using these settings:

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

@media screen and (max-width: 580px) {
.atwkslider .atwk-caption-overlay {display:block;font-size:65% !important;}
.atwkslider .atwk-caption-overlay {right:auto;bottom:auto;width:3.97%;padding-left:5px;padding-right:10px;text-align:center;}

But then… when I added an additional photo with the same 800×600 dimensions, the slider captions are no longer centered, even on my desktop. In addition to not being centered on the phone, some of text  runs completely off the screen in portrait mode.

I removed the additional photo and everything looked good again, so the problem has something to do with adding photos to the gallery. I went ahead and added the photo back in so you can see for yourself what the slider captions look like.

https://gerlachproductions.com/

[scrambler]

I told you several times that if you change the content of the slider, the width:4% will have to be adjusted.

I suspect if you have more images, the width of one will be a smaller percentage of the whole thing, so the value will have to be decreased.

Try small increments like 0.1% at a time or less

[GDGerlach344]

I was aware of adjusting the width when adding content but I was adjusting the width in Global CSS instead of Slider CSS. Looks fine now. Sorry about that.

What do the left-right padding values in the Global CSS affect? I tried changing the px values to see what they do but didn’t see any changes.

@media screen and (max-width: 580px) {
.atwkslider .atwk-caption-overlay {display:block;font-size:65% !important;}
.atwkslider .atwk-caption-overlay {right:auto;bottom:auto;width:4.0%;padding-left:10px;padding-right:10px;text-align:center;}

 

[scrambler]

The left and right padding will only have visible impact on phones when the caption takes the whole width of the slider area.

You had said you wanted more space on the side there.

[GDGerlach344]

There are a few captions where the first line of text has only 2-3 Pixels of L-R margin pad. The picture of NBA player Andrew Wiggins is a good example. I changed both left and right padding from 10px to 20px and nothing changed. Same thing when I was incorrectly adjusting the width just to the left of the L-R padding to fix the problem I had when I added the extra photo. No matter what value I set for the width, nothing changes.

[scrambler]

Several problems.

You seem to have more rules that we discussed and some of them are conflicting with eachother.

You have a slider rule

.atwkslider-on-location .atwk-caption-overlay {
bottom: 10px;
right: auto;
width: 3.6%;
padding: 0.3em;
}

That sets the global padding (all around at 0.3em) and overrides the padding set in the mobile rule below

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

.atwkslider .atwk-caption-overlay {
right: auto;
bottom: auto;
width: 4.0%;
padding-left: 20px;
padding-right: 20px;
text-align: center
}

BUT, that rule above is missing a closing Curly bracket , AND the width also need to be changed.

SO the Mobile rule above needs to become:

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

.atwkslider .atwk-caption-overlay {
right: auto;
bottom: auto;
width: 3.1% !important;
padding-left: 20px !important;
padding-right: 20px !important;
text-align: center
}
}

NOTICE the addition of !important, the different Width on mobile AND the two closing curly bracket, one for the last CSS rule and One for the @media

 

 

 

 

[GDGerlach344]

The new CSS worked. Looks good. Before adding this new CSS you had me adjusting the width of the box using the Slider CSS. Now whenever I add a photo, I need to adjust the width in the Global CSS, correct? Because I noticed that changing the width in the Slider CSS no longer seems to have any affect. I have taken notes regarding how the various CSS values affect the different parameters.

BTW do I change my avatar? Couldn’t find a place to change it on my forum profile edit page.

[scrambler]

The width in the SLider CSS box is global and should be set for desktop and tablet

The width in the @media rule overrides the width in the CSS slider box, but only for phones, so it needs to be changed too to make sure the width is good there too in case it needs a different value

[GDGerlach344]

If I want to add additional sliders elsewhere on my website, how do I modify the Slider CSS rule and the @media rule?

[scrambler]

If the other sliders needs the same changes, just add the same” .this-slider….” rule in each slider CSS rule box, and as for the @medida rule, it will apply automatically to all sliders.

If you do not want these rules to apply to other sliders, we will have to specialize the @media rule for specific sliders

[GDGerlach344]

If I create additional sliders, the only difference between them will be the number of photos. So that means I’ll need to be able to adjust the width in the Slider CSS rule and the @media rule for each additional slider because the number of photos will probably vary.

[scrambler]

The easiest way then will be to move the @media rule to the Slider CSS rule box.

When you remove that rule from the theme, and place it in the slider CSS rule box, you need to replace .atwkslider by .this slider like below

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

.this-slider .atwk-caption-overlay {
right: auto;
bottom: auto;
width: 3.1% !important;
padding-left: 20px !important;
padding-right: 20px !important;
text-align: center
}
}

Remember all the curly brackets!!

 

[GDGerlach344]

I added the revised code in the Slider CSS box. It looks good on my desktop and good on my phone in the landscape position; however the slider doesn’t show at all when I rotate the phone to the portrait position. Here is the CSS as it appears now. The 3.49% width & 10% L-R padding settings are not new; I’ve been using those settings for about a week & the captions looked fine in portrait mode.

.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 {
right: auto;
bottom: auto;
width: 3.49% !important;
padding-left: 10px !important;
padding-right: 10px !important;
text-align: center
}
}

[scrambler]

I have no idea why, but you need to remove the bottom:auto. I am not sure how it ended there any way…

While at it, you can remove the right:auto, as it is already in the global rule

@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
}
}

[Author]

Posts