scale up images in gallery - Support | Kriesi.at

Viewing 15 posts - 1 through 15 (of 15 total)

Author

Posts
November 10, 2017 at 1:39 am #874923

diefleischerei
Participant

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
Inactive Moderator
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
Participant

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
Participant
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
Participant
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
Participant
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
Moderator
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
Participant

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
Participant

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
Participant
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
Participant

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
Participant

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
Moderator
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
Participant

CLOSED THANKS:

November 20, 2017 at 12:05 am #878910

Mike
Moderator

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.