Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • March 27, 2015 at 8:38 pm #419598
    djshortkut

    I have fullscreen Grid Row with 3 1/3 sections on my homepage and 3 images with captions in this section. I’m not sure if this is how they are supposed to behave or not on the iPhone but the problem is that they don’t go fullscreen on my iPhone.

    1. In portrait mode on the iPhone I want the images to extend fullscreen (See attached image)
    2. In landscape mode on the iPhone I want them to extend fullscreen without any gaps in between them so it formats like it does on larger screens (see attached image)
    3. I have the caption set on hover and it looks great on my iMac 21.5″ screen but it looks as though the text isn’t responsive so on smaller screen sizes it is too large for the image size and gets cut off.
    4. Is there a way to get the hover on the image to work on mobile devices? I have links set for each of these images so when you touch them it send you to the link. Any way to have it so if it is touched once the caption shows up and then if it is touched again it takes you to the link?

    Thanks for your help!

    March 30, 2015 at 5:25 am #420180
    Ismael

    Hey djshortkut!

    Thank you for using Enfold.

    1.) Add this to the Quick CSS field:

    @media only screen and (max-width: 989px) {
.responsive #top #wrap_all .av-flex-cells .no_margin .flex_cell_inner {
  width: 100%  !important;
  max-width: 100% !important;
  margin: 0 auto;
  display: block !important;
}}

    If you want to apply the changes on that specific grid row, use the section id field.

    2.) I think the above code will also affect this.

    3.) Since we enlarge the images on mobile, it can now contain the captions.

    4.) No, unfortunately, hover effect isn’t support on touch screens. You might need to hire a freelance developer to make it work on mobile devices. For further modifications, please look for any tutorials regarding google inspector or firebug plugin. Basic knowledge of this will help a lot with css modifications.

    Regards,
    Ismael

    March 31, 2015 at 6:38 pm #421450
    djshortkut

    Thanks Ismael! This code took care of # 1 & 2

    I’m still having the same issue with #3 though. If you resize your browser you can see that when the grid row gets smaller, the captions don’t fit over the image and are larger. For some reason this is not responsive. Can you help me make the captions fit inside these grid rows please?

    April 1, 2015 at 6:00 pm #422064
    Yigit

    Hi!

    Please add following code to Quick CSS 

    @media only screen and (max-width: 768px) {
.responsive #top #wrap_all .av-flex-cells .no_margin { width: 100% !important; display: block !important; }}

    Regards,
    Yigit

    April 2, 2015 at 8:14 pm #422743
    djshortkut

    Thank you! You can close this thread.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Grid Row With Images & Captions Issues’ is closed to new replies.