Home Forums Weaver Show Posts & Show Sliders Show Sliders Auto Sizing

Viewing 16 posts - 1 through 16 (of 37 total)
  • Author
    Posts
  • #73086
    GDGerlach344
    Participant

    I have successfully installed the Show Sliders plugin. On some of the photos, there’s a lot of white space between the photo and the thumbnails. The photos are of various dimensions. Is there a setting that would autosize the photos so there wouldn’t be that white space between the photo and the strip of thumbnails?

    https://gerlachproductions.com/

    #73087
    GDGerlach344
    Participant

    OK I figured out how to do the resizing by checking the Allow height of the slider to shrink and grow.

    Another question… I checked Show Image Caption & Overlay Caption over bottom of image but it isn’t working.

    #73089
    scrambler
    Moderator

    It appears there is a bug with the “Overlay” option, may be @weaver will want to have a look.

    You can try removing  that, there may still be an issue with the fact the slider height varies…

    or you can try to play by adding the following CUstom CSS in the CSS Box at the bottom of the SLider editing page

    .this-slider .atwk-caption-overlay {top:60%;right:auto;bottom:auto}

    #73090
    GDGerlach344
    Participant

    The Custom CSS worked. Is there a way to modify the CSS so the caption is centered and moved down closer to the bottom of the photos? The captions don’t show up on my phone when I hold the phone in the vertical (portrait) position. I can see them in the horizontal (landscape) position. Could you see if the captions show up on your phone in the portrait position? The link is in my original post.

    #73091
    scrambler
    Moderator

    Now that you have all the images the same height, you can adjust the top value to 85%

    To center it try adding the width:4%. That may have to be adjusted if the number of images change.

    Modified rule will look like

    .this-slider .atwk-caption-overlay {top:85%;right:auto;bottom:auto;width:4%;}

    The captions are disabled on Phones as it becomes crowded and noy very readable

    You can try adding the Rule below in the THEME Global Custom CSS Rule box to see if you like it Don’t forget all the curly brackets. You can change the values to your liking

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

    #73100
    GDGerlach344
    Participant

    The caption location rule worked but the enable captions on phones rule did not. I notice the enable captions rule is similar to another rule either you or Weaver gave me. According to my notes that rule was “to keep wrapper margins on mobile devices.”  Not sure what I meant by that note but here are the last three rules I added to Global.  You can see the similar rule two rules above the new one you just sent me:

    @media only screen and (max-width:640px) {
    #wrapper {padding:10px;}
    }
    #content .wp-caption img {max-width:100%;}
    #content .wp-caption {max-width:45%;}
    .menu-primary {z-index:1000;}
    }
    @media screen and (max-width: 580px) {
    .atwkslider .atwk-caption-overlay {display:block;top:80% !important;font-size:45% !important;}
    }

    #73101
    scrambler
    Moderator

    Did you leave the rule in, because I do not see it.

    If you removed it, put it back so I can check.

    If  you left the rule in place, where exactly did you put the rule, and if you have other rules in that place, please paste here the whole content of that box so I can see if you may have some bad syntax before causing a problem

    #73102
    GDGerlach344
    Participant

    Here is the list of rules in “Custom CSS Rules” in the “Fonts & Custom” tab:

    #content {line-height:1.2;}
    .mybox1 {background-color:#E3E3CC;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:0px;margin:10px 5px;padding:10px;}
    #content .mybox1 p {margin-bottom:.6em;}
    .mybox2 {background-color:#2C4583;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;margin:10px 0px;padding:10px;}
    #content .mybox2 p {margin-bottom:.6em !important;}
    div.titlebelowthumb {font-size:112%;}
    #primary-widget-area p {margin-bottom:.6em;}
    #secondary-widget-area p {margin-bottom:.6em;}
    #secondary-widget-area p {margin-bottom:.6em;}
    .wvrx-menu-container ul ul {width:500px;}
    .mycont {border:2px solid #000099;overflow:hidden;clear:both;margin-top:-2px;}
    .myimage {width:28%;float:left;padding:1%;}
    .mytext {float:left;width:68%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;min-height:172px;border-left:2px solid #000099;padding:1%;}
    @media only screen and (max-width: 580px) {
    .myimage, .mytext {width:100%;}
    .mytext {border-left:none;border-top:-1px solid black;min-height:0px;}
    }
    .mycont2 {background-color:#white}
    .mycont2 {border:2px solid #000099;overflow:hidden;clear:both;margin-top:-2px;}
    .myimage2 {width:14%;float:left;padding:1%;}
    .mytext2 {float:left;width:82%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;min-height:100px;border-left:2px solid #000099;padding:1%;}
    @media only screen and (max-width: 580px) {
    .myimage2, .mytext2 {width:100%;}
    .mytext2 {border-left:none;border-top:-1px solid black;min-height:0px;}
    }
    @media only screen and (max-width:640px) {
    #wrapper {padding:10px;}
    }
    #content .wp-caption img {max-width:100%;}
    #content .wp-caption {max-width:45%;}
    .menu-primary {z-index:1000;}
    }
    @media screen and (max-width: 580px) {
    .atwkslider .atwk-caption-overlay {display:block;top:80% !important;font-size:45% !important;}
    }

    #73103
    scrambler
    Moderator

    As expected you have sevarl syntax error one actually nullyfying anything after it

    .mytext {border-left:none;border-top:-1px solid black;min-height:0px;}

    negative value are invalid, you must have meant 1px not -1px

    .mycont2 {background-color:#white}

    #white is invalid should be just white

    But the one corrupting the file is the two closing curly bracket in the series below, which is one too many

    @media only screen and (max-width:640px) {
    #wrapper {padding:10px;}
    }
    #content .wp-caption img {max-width:100%;}
    #content .wp-caption {max-width:45%;}
    .menu-primary {z-index:1000;}
    }

    If the last three rule should only apply on mobile it should be

    @media only screen and (max-width:640px) {
    #wrapper {padding:10px;}
    #content .wp-caption img {max-width:100%;}
    #content .wp-caption {max-width:45%;}
    .menu-primary {z-index:1000;}
    }

    If the last three rules are for all, it should be

    @media only screen and (max-width:640px) {
    #wrapper {padding:10px;}
    }
    #content .wp-caption img {max-width:100%;}
    #content .wp-caption {max-width:45%;}
    .menu-primary {z-index:1000;}

    Once you correct that, the last added rule should function.

    Post back when done

    #73105
    GDGerlach344
    Participant

    The rules worked. Thanks! I was able to increase the font size.

    How do I create and/or modify a rule to justify the captions left?

    Also… I noticed on some of the longer captions, on my phone, the text on the right side of the screen is slightly clipped. Is there a way to set margins for the text? The box is fine so that doesn’t need to be modified unless that’s the only way to set text margins.

    #73106
    scrambler
    Moderator

    You need to clarify here as the captions were on the left and you asked to modify the to be centered.

    If what you want is to keep the grey box underneath full width with the text on the left, that may look weird when the browser is wider than the image

    But the modified rule below would do that.

    .this-slider .atwk-caption-overlay {top:85%;right:auto;bottom:auto;width:4%;text-align:left;}

    For the space, what you need is padding that you in the rule. You may also need to adjust the width a bit. Reduce the width until you can see the right side of the box. Remember the content of the slider will affect what that number is, so if it changes check it again.

    .this-slider .atwk-caption-overlay {top:85%;right:auto;bottom:auto;width:3.97%;padding-left:10px;padding-right:10px;text-align:left;}

    #73107
    GDGerlach344
    Participant

    Yeah, you’re right about justifying left looking bad on a wide browser. I switched it to center.

    One more thing and I think we’ll be done. I like how long captions wrap onto a second line. But the first line doesn’t move up vertically to center both lines vertically. In other words, the second line of text rests on the bottom of the box on my phone in portrait mode. Is there a way to center both lines of text vertically so the margin above the top text line is the same as the margin below the bottom text line? If not, I could live with moving the top line up a little so there is at least some margin below that 2nd line of text.

    #73108
    scrambler
    Moderator

    Now that you have made all the images the same height, we can use a bottom positioning instead of Top, and that will give consistent position of the box without clipping for two line captions

    The two rules change to the ones below

    In the slider CSS, remove the top and use bottom:0px (or more if you want space below the caption)

    .this-slider .atwk-caption-overlay {bottom:0px;right:auto;width:4%;}

    and on mobile, remove the top, and no need to change the bottom value

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

     

    #73116
    scrambler
    Moderator

    I noticed you changed the slider rule to use bottom, but you forgot to remove the top property in the @media rule so it messes up the mobile caption

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

    #73118
    GDGerlach344
    Participant

    I took out the top:80% !important

    After I implemented your changes, the first line of text was too low in the box and most of the second line was pushed down below the box and you couldn’t see most of it. I made the following changes.

    I changed the bottom to 10px to add space below the box:
    .this-slider .atwk-caption-overlay {bottom:10px;right:auto;width:4%;}

    Then I changed the top value to 80% which increased the box height to accommodate two lines of text. I also changed the font size to 65%:
    @media screen and (max-width: 580px) {
    .atwkslider .atwk-caption-overlay {display:block;font-size:65% !important;}
    .atwkslider .atwk-caption-overlay {top:80%;right:auto;bottom:auto;width:3.97%;padding-left:5px;padding-right:10px;text-align:center;}

    Now you can see the 2nd line of text but it’s sitting on the bottom of the page & a little outside the box. How do I move it up into the box so that the margin is the same above and below the text for both single and double line captions? If that’s not possible, as long as the top/bottom margins are the same for double line captions, I can live with single line captions having a larger bottom margin than top.

     

    #73120
    scrambler
    Moderator

    You need to remove the top property and post back if you still have issue that way!

Viewing 16 posts - 1 through 16 (of 37 total)
  • You must be logged in to reply to this topic.