Tagged: 

Viewing 30 posts - 1 through 30 (of 30 total)
  • Author
    Posts
  • #785289

    Hi

    I’m launching tomorrow, so kind of fixings all sorts of display issues.

    I noticed that the on my iPhone, the slider caption right does not displays as expected. See screenshot here:
    https://www.dropbox.com/s/0d4wjjv28zwu43z/iphone%20slider%20caption%20right.PNG?dl=0

    The text looks centered instead of to the right of the image like on all other devices. I tried several different CSS some of which I found in the forum, but none of these worked.

    Here’s the page where is most noticeable: http://crescendo.staging.wpengine.com/coaching/ (hosted on WPengine)

    Any help to force this to display correctly would be greatly appreciated.

    Thanks
    Lyse

    #785300

    Hey Lyse,

    I see what you mean that is appears it’s centered.

    In the design of the theme, the width of the div caption-container is 85% of the available screen width, to make sure that there is a nice space from edge of the screen. Inside that div, the text is currently set to align to the right. But when the length of the caption is equal to the total width of caption-container, it looks like the caption aligned to the center. This is what happened in /coaching, like you said. But it’s really aligned to the right.

    To test this rule, I tried putting a line break in the middle of your caption, and we can see that the text aligned to the right. Like this:
    http://imgur.com/a/vTQCD

    So the code of the theme is working properly. :)

    If you want, you can adjust the width of the div, just for phones, like this:

    @media only screen and (max-width: 767px) {
       .avia-slideshow-1 .caption_container {
          width:95% !important;
          max-width:95% !important;
       }
    }

    I hope my explanation is clear. Please let me know if anything is unclear!

    Best regards,
    Sarah

    • This reply was modified 6 years, 11 months ago by Sarah. Reason: css code modified to apply to slideshow 1 caption container only
    #785345

    Hi Sarah,

    Great explanation!

    I added the CSS but it still not working properly.

    Thanks
    Lyse

    #785372

    Hi Sarah,

    It’s also happening on my sliders on this page: http://crescendo.staging.wpengine.com/ (hosted on WPengine)

    Thanks
    Lyse

    #785386

    Hi again Sarah,

    My client’s iPhone is smaller than mine (G5) and here’s what it looks like:
    https://www.dropbox.com/s/nvmignqq01wys48/Julie%20iPhone%20caption%20issue.PNG?dl=0

    One more issue also is if you size your desktop window the caption display responsiveness is not correct either.

    Thanks
    Lyse

    #785714

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @media only screen and (max-width: 480px) {
    .slideshow_align_caption {
        padding-top: 15px;
    }}
    

    Best regards,
    Yigit

    #785788

    Hi Yigit,

    I tried the code snippet but don’t see the change.

    Thanks
    Lyse

    #785792

    Hi,

    They show up fine on my end, attached a screenshot in private content field.

    Please flush browser cache and refresh your page a few times – http://wiki.scratch.mit.edu/wiki/Hard_Refresh

    Best regards,
    Yigit

    #785807

    Hi Yigit,

    I tried again and also removed the previous code snippet that was provided earlier.

    I did clear server cache and also tried the code on my staging area (where there is no server cache) and the caption still does not wrap like on the desktop or iPad. There should not be any text across faces or body of the people on the image and should be in a restricted block form like the others. The text is small enough to fit within a block.

    My site is just on hold temporarily on production and if you wish you can see it here:

    Thanks
    Lyse

    #786547

    Hi,

    you could use this code for mobile (iPhone screen size):

    @media only screen and (max-width: 767px) {
    .slideshow_align_caption {
    top: 117px;
    }}

    and adjust as needed.

    Best regards,
    Andy

    #786571

    Hi Any,

    What I want is for the text not overlap the person in the images like on the desktop and ipad. So I’m not sure it’s the top of the element that needs repositioning. The text should be restricted in width and wrap to the next line.

    Thanks
    Lyse

    #786586

    Hi,

    by using my code you should go fine. However, best to provide us a mockup showing the results you want to achieve, cause then we can provide you a much more precise code to achieve what you want.

    Best regards,
    Andy

    #786596
    #786614

    Hi,

    use this code:

    @media only screen and (max-width: 767px) {
    .avia-caption-content.av_inherit_color {
    width: 100px;
    float: right;
    margin-right: 18px;
    margin-top: 36px;
    }}

    and adjust as needed.

    Best regards,
    Andy

    #786634

    Hi Andy,

    I added !imortant to all elements because nothing was changing. Once reuploaded, I saw the margin top change but the content still displays across the image…

    Thanks
    Lyse

    #786738

    Hi,

    May you clear your cache and check if this will solve?

    Best regards,
    John Torvik

    #786808

    Hi John

    I can see it’s working fine on two of the pages, but on the home page where I use a left caption, it’s messed up.

    Thanks
    Lyse

    #786815

    Hi John,

    Another thing I did was to add the “.caption_right” element to the last CSS code so it would only get applied to the right caption content.

    @media only screen and (max-width: 767px) {
    .caption_right .avia-caption-content.av_inherit_color {
    width: 100px!important;
    float: right!important;
    margin-right: 18px!important;
    margin-top: 36px!important;
    }
    }

    Lyse

    #786888

    Hi John,

    Here’s a screenshot of how my client sees the home page sliders:

    on iphone 5 : https://www.dropbox.com/s/ii7myi2sbtyzzm0/slider%20caption%20client%20iphone%205.PNG?dl=0
    on iphone5S : https://www.dropbox.com/s/q295vlyt0441idp/slider%20caption%20client%20iphone%205S.PNG?dl=0

    I also have similar issues on my iphone 6S

    Thanks
    Lyse

    #787277

    Hi,

    Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    Login credentials include:

    • The URL to the login screen.
    • A valid username (with full administration capabilities).
    • As well as a password for that username.
    • permission to deactivate plugins if necessary.

    Best regards,
    Andy

    #787299

    Hi Andy,

    See below….

    #787325

    Hi,

    this is a login to a different site. Please provide login for the website in private content instead.

    Best regards,
    Andy

    #787353

    Hi Andy,

    My website is on the product side now just waiting for issues to be resolved with the sliders captions, then I’ll release it.

    All of the latest CSS changes are on the production side at the URL I provided you with. I have resetted the password, login with it successfully, so please try again.

    Thank you for your patience
    Lyse

    #787361

    Hi,

    ok, but where can we see the elements in question? This is the only thing I can see on your homepage: “Hors service temporairement durant la mise à jour du site web”

    Best regards,
    Andy

    #787383

    Hi Andy

    Right here

    Thanks
    Lyse

    #788800

    Hi,

    The caption that you’re referring to is part of the image. Please note that the slider images are set as background and their background size property is set to “cover” which means that it will force the image to cover the entire container but some parts of the images might not be visible inside the background positioning area. You should remove the “SUPRENEZ VOUS” text in the image or add another slider that is specifically created for mobile screens.

    Best regards,
    Ismael

    #788881

    Hi Ismael,

    The caption on the left is not part of the image. Andy provided the CSS code to make the caption display better on the right. I’m looking to do the same with the left.

    Thanks
    Lyse

    #789322

    Hi,

    To have sure, may you provide us a screenshot about this caption that you want the last change?

    Best regards,
    John Torvik

    #789654

    Hi John,

    I provided iphone screenshots but here are three more:

    RELEVE page landscape: https://www.dropbox.com/s/dmlx76pgzuju60s/IMG_0469.PNG?dl=0

    HOME page vertical: https://www.dropbox.com/s/7sb68v3s79nt8fu/IMG_0472.PNG?dl=0

    HOME page horizontal: https://www.dropbox.com/s/u98bz8raky3u8jx/IMG_0473.PNG?dl=0

    I must get this working soon….

    Thanks
    Lyse

    #790018

    Hi,

    Please look for this css code in the child theme’s style.css file.

    @media only screen and (max-width: 480px) {
        .slideshow_align_caption {
            vertical-align: top;
            padding-top: 50px!important;
        }
    }

    Adjust the viewport from 480px to 768px. It will move the captions to the top of the slider.

    Best regards,
    Ismael

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