Increase size of images for mobile devices

  • Resolved Victoria Green

    (@victoriagreenphotography)


    1 year, 10 months ago

    Hello – I would like to increase the image size on mobile phone devices as at the moment the images only fill half the width of the device.

    Please see here:
    https://victoriagreenphotography.com/the-orangery-wedding/

    Currently I have the additional CSS as follows as I want images on mobile devices to be displayed as just 1 column (this works great):

    /* Force single column on screens 480px or smaller */

@media only screen and (max-width: 480px){

.foogallery.fg-masonry .fg-item {

margin: 10px !important;

width: calc(100% – 10px) !important;

min-width: calc(100% – 10px) !important;

max-width: calc(100% – 10px) !important;

}

}

    Thank you, Victoria

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support elviiso

    (@elviiso)

    1 year, 9 months ago

    Hi @victoriagreenphotography

    Sorry for the delayed response.

    The CSS you’ve shared above is not working properly since it looks like some of the CSS properties are clashing/conflicting with other properties and so are not working. We’ll need to add more selectors to change that.

    You can use the following minor tweak to the CSS above and try it out if it works:

    /* Force single column on screens 480px or smaller */
@media only screen and (max-width: 480px){
	 .foogallery.foogallery-container.fg-masonry .fg-item {
		margin: 5px !important;
		width: calc(100% - 10px) !important;
		min-width: calc(100% - 10px) !important;
		max-width: calc(100% - 10px) !important;
	}
}

    Thanks.

    Kind regards,
    Elvis.

    Thread Starter Victoria Green

    (@victoriagreenphotography)

    1 year, 9 months ago

    That has worked a treat!

    Thank you so much Elvis – really appreciate it.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Increase size of images for mobile devices’ is closed to new replies.