Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • November 10, 2017 at 1:39 am #874923
    diefleischerei

    https://imgur.com/a/GtP7h

    how can i scale up images in gallerys to full width only in responsive view on smartphones.

    greetings, Alexander

    November 10, 2017 at 6:40 pm #875286
    Victoria

    Hey diefleischerei,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 479px) {
 .responsive #top #wrap_all  #av_section_6 .container {
      width: 98%;
      max-width: 100%;
  }
 .responsive #top #wrap_all  #av_section_6  .av_textblock_section {
    width: 85%;
    margin: 0 auto;
  }
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    November 10, 2017 at 11:20 pm #875397
    diefleischerei

    Really great. Works perfect. I have one little problem with the customer reviews here: https://imgur.com/a/zd6HO

    How can i (A) set the little arrow down in the middle of the picture and how can i (B) place the text centerd under the image?

    November 11, 2017 at 9:38 am #875437
    Guenni007

    you can try this in quick css:

    .avia-slider-testimonials .avia-testimonial-arrow-wrap {
    left: 50%;
    transform: translateX(-50%);
}

@media only screen and (min-width: 480px) {
.avia-testimonial-meta-mini {
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
}
    • This reply was modified 7 years ago by Guenni007.
    November 11, 2017 at 10:03 am #875440
    Guenni007

    and if you like to have in this case that little arrow a bit bigger insert this wohle code instead:

    .avia-slider-testimonials .avia-testimonial-meta {
    margin: 20px 0 0 0;
}

.avia-slider-testimonials .avia-testimonial-arrow-wrap {
    left: 50%;
    transform: translateX(-50%);
    top: -21px;
    width: 30px;
    height: 30px;
}

.avia-testimonial-arrow-wrap .avia-arrow {
    height: 20px;
    width: 20px;
    top: -14px;
    margin-left: -10px;
}

@media only screen and (min-width: 480px) {
.avia-testimonial-meta-mini {
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
}
    • This reply was modified 7 years ago by Guenni007.
    November 12, 2017 at 5:36 pm #875766
    diefleischerei

    Hey it do not work? i don`t know why?

    i use your code:

    
/*Galerie Bilder am Handy breiter machen */
@media only screen and (max-width: 479px) {
 .responsive #top #wrap_all  #av_section_6 .container {
      width: 98%;
      max-width: 100%;
  }
 .responsive #top #wrap_all  #av_section_6  .av_textblock_section {
    width: 85%;
    margin: 0 auto;
  }
}

    it would be amazing i i could get this look: https://imgur.com/a/GtP7h

    November 12, 2017 at 9:13 pm #875814
    Mike

    Hi,
    Try this code in the General Styling > Quick CSS field:

    @media only screen and (max-width: 767px){
.responsive #top #wrap_all .container {
    width: 100%!important; 
    max-width: 100%!important; }}

    If that works better we could add some padding to the text elements if you wish.

    Best regards,
    Mike

    November 12, 2017 at 10:20 pm #875850
    diefleischerei

    Thanks Mike but this do not work. My whole screendesign get damaged ;(

    @media only screen and (max-width: 479px) {
    .responsive #top #wrap_all #av_section_6 .container {
    width: 98%;
    max-width: 100%;
    }
    .responsive #top #wrap_all #av_section_6 .av_textblock_section {
    width: 85%;
    margin: 0 auto;
    }
    }

    This code works pretty fine. I only edited the gallery and now i cannot reproduce the effect. it was working.

    November 12, 2017 at 10:27 pm #875855
    diefleischerei

    Maybe is it not “#av_section_6” how can i get the correct number of my gallery?

    November 12, 2017 at 11:46 pm #875883
    Guenni007

    sorry i’m concerning to your Supplementary question with the testimonial. here
    I see now that you like to have the name under the images.
    So the rest of the code above stayes for the little arrow: –
    and i dont know whay you have made the image container bigger without the image. So it is not centered
    So either you increase the image size to 200px x 200px or go back to the original 180px x 180px – code for both is:

    .avia-slider-testimonials .avia-testimonial-meta {
    margin: 20px 0 0 0;
}

.avia-slider-testimonials .avia-testimonial-arrow-wrap {
    left: 50%;
    transform: translateX(-50%);
    top: -21px;
    width: 30px;
    height: 30px;
}

.avia-testimonial-arrow-wrap .avia-arrow {
    height: 20px;
    width: 20px;
    top: -14px;
    margin-left: -10px;
}

.avia-slider-testimonials .avia-testimonial-meta .avia-testimonial-image {
    width: 180px !important;
    height: 180px !important;
}

    and by the way: the galleries are now av_section_4 and av_section_9
    if you make the screen small – the section 4 goes too in a one column and this seems to look good if both 4 and 9 are the same

    • This reply was modified 7 years ago by Guenni007.
    November 13, 2017 at 1:14 am #875899
    diefleischerei

    It works well. But how can i add a space of 10px between the pictures in the gallery here: https://imgur.com/a/yP3mr

    November 13, 2017 at 5:09 pm #876169
    Guenni007

    the distance you can set on alb element is too much?
    You can set in columns the “space between columns” option – this has the big advantage that on responsive case that distance goes to off.
    if it is too much space go to second tab on column and define a padding.

    November 14, 2017 at 7:08 am #876467
    Ismael

    Hi,

    Please use this css code to create space between the gallery items.

    #top #wrap_all .avia-gallery-thumb a {
    width: 100%;
    margin-bottom: 10px;
}

    Best regards,
    Ismael

    November 18, 2017 at 12:38 pm #878534
    diefleischerei

    CLOSED THANKS:

    November 20, 2017 at 12:05 am #878910
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘scale up images in gallery’ is closed to new replies.