Reduce Thumb Size on Mobile Devices

  • Resolved agrudick2017

    (@agrudick2017)


    4 years, 9 months ago

    I am using Simple Portfilio. How can I set my thumbnail size to 240 x 190 on large and medium screens, and reduce the thumbnail size to 150 x 113 on phones ?

    Didn’t find anything in the documentation. I searched the forum and found the following CSS that changes the image size on mobile devices:

    @media handheld, only screen and (max-width: 767px) {
    .foogallery .fg-image {
    height: 113px;
    width: 150px;
    }

    When I tried it, it reduced the image size within the thumbnail on my phone, but not the overall thumbnail size. Here is a screenshot: https://www.dropbox.com/s/o9j7s17l2mph72w/Foo%20Gallery%20Screenshot.jpg?dl=0

    Is there a CSS that will change the overall thumbnail size on mobile devices?

    Here is what I am trying to do: I want to have 4 columns on my laptop and 2 columns on my phone. When my thumbnail size is set to 240 x 190 I get 4 columns on my laptop (exactly what I want) and one column on my phone (not what I want). When my thumbnail size if set to 150 x 113, I get 6 columns on my laptop (not what I want) and 2 columns on my phone (exactly what I want).

Viewing 3 replies - 1 through 3 (of 3 total)

  • @steveush – are you able to respond to this request please?

    Plugin Author bradvin

    (@bradvin)

    hey @agrudick2017,

    Here is some custom CSS you can try for simple portfolio. It assumes you are using the default margin of 40px. And this sets the column layout to 2 when the screen size is lower than 480px:

    
@media screen and (max-width: 480px) {
	#foogallery-gallery-2.foogallery.fg-simple_portfolio .fg-item {
		margin: 20px !important;
		max-width: calc(50% - 40px) !important;
		min-width: calc(50% - 40px) !important;
	}
}
    Thread Starter agrudick2017

    (@agrudick2017)

    Brad,

    Sorry it took so long to get back to you. I tried the CSS that you posted and still got one column on my phone. Below is a link to screenshots of the Gallery editing page showing my settings and the result on my phone. I tried setting the “gutter” to both 20 and 40 and got the same result.

    Link to screenshots: https://www.dropbox.com/sh/cfoa9y4guy7ko2d/AABzfPtiOnSFn7R6cLjlT0Pna?dl=0

    Art R.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Reduce Thumb Size on Mobile Devices’ is closed to new replies.