-2

so i've set http://augustesoesastro.com/press/ my site to 90% because i wanted to have 2 column for the gallery. since i don't know how to make it with Foogallery.

using:

html {

    zoom: 90%; 
}

but the code ruins my header especially the misplaced cart icon on mobile. does anyone have any idea how to disable the code on mobile only?

Rei Kirie
  • 1

1 Answers1

0

You can use media selector in css

@media (max-width: 480px) {
  
    html {
        zoom: 100%; 
    }
  
}

@media (min-width: 481px) {

    html {
        zoom: 90%; 
    }

}

UPD:

For 2 columns, we can override the css class for tablets and phones

@media (max-width: 1321px) {
  
    .fg-item { 
        width: 38vw;
    }
  
}

38vw - optimal value for all screens lower than 1321px

You can adjust other values for other ranges with min-width max-width.

aksioto
  • 283
  • 1
  • 5
  • 11
  • what if i just want to zoom out the Foogallery content only? so i can make it 2 column? – Rei Kirie Mar 08 '21 at 05:44
  • @ReiKirie If you want 2 columns you can override css class `.fg-item` without using zoom. I added a new example above – aksioto Mar 08 '21 at 12:11