Front Page responsive issues

not sure how mobile responsive work but some big image become smaller and small images become bigger as the screen gets smaller.

i tried specifying the size to smaller in the image widget but it’s not working. do i have to resize the image before putting them into the image widget ?

may i know what i m doing wrong ?

Hello,

responsive design works with something called “media queries”. This means, that when the screen is at least or not more then e.g. 780px, then “this container or that image is only that high”.
So sometimes with smaller screens you need the images to become bigger, that you can recognize what is on the image.

Which one exactly is your image widget and how should the images be sized? Maybe I can write a little css snippet to fix your issue.

Kind regards

hi,

take a look at the “eyewear and lens” image that is fully stretched…this one actually resized in mobile.

however, it then appeared smaller than those images that i load below that.
see the 4 images and followed by 2 images. they became bigger as the screen size as the size gets smaller.

hope you get i am tryign to tell you. thanks.

If you want the “eyewear and lens” image still to be 100% width (it has got a 15px padding left and right in the mobile version) use this:

@media only screen and (max-width: 780px) {
  .panel-grid-cell {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

That the image becomes smaller is because the height of the image is the result of the lower width. The smaller the width is, the smaller is the height. Otherwise this would look crazy and the image would be warped.

The images of your brands become larger because otherwise they would be very small on the little smartphone displays.
But if you want them to be small, use this:


@media only screen and (max-width: 780px) {
   #pg-w55fc4a70ebe5c-0 .panel-grid-cell, #pg-w55fc4a70ebe5c-1 .panel-grid-cell, #pg-w55fc4a70ebe5c-2 .panel-grid-cell, #pg-w55fc4a70ebe5c-3 .panel-grid-cell, #pg-w55fc4a70ebe5c-4 .panel-grid-cell, #pg-w55fc4a70ebe5c-5 .panel-grid-cell {
    float: left !important;
    width: 25% !important;
  }
}

I would probably recomment you not to change the width of the brand images. They will become very small.

Kind regards,
WeAreOne

Thanks alot…

where do i insert these codes ?

i inserted the 2nd one in the CSS style of the image widget , seems like there is no difference.

You’re welcome

For new css code you should make a child theme or download and install a plugin like simple custom css.

Hi Thanks again.

i copied the first set of CSS into simple custom css, and the second below it.

the 2nd set of CSS does not seem to work.

Maybe try this, I hope it works:


@media only screen and (max-width: 780px) {
  #pg-w55fef1dbd826c-0 .panel-grid-cell, #pg-w55fef1dbd826c-1 .panel-grid-cell, #pg-w55fef1dbd826c-2 .panel-grid-cell, #pg-w55fef1dbd826c-3 .panel-grid-cell, #pg-w55fef1dbd826c-4 .panel-grid-cell, #pg-w55fef1dbd826c-5 .panel-grid-cell {
  float: left !important;
  width: 25% !important;
  max-width: 25% !important;
 }
}

And make sure you don’t forget any bracket or semicolon.