Portfolio size and centered in tablet view

[theSA]

Hi,

I’ve a couple of questions regard portfolio settings for tablet and mobile view.

1. I’d like to make the portfolio image smaller on tablet view – now it’s the same size as in desktop view, i.e. huge.
2. How do I center the portfolio in tablet view? No matter what I try to do, it’s always set to the left which makes it look rather ugly.

Thanks in advance for your help!

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

1. I help you make the portfolio image small size on tablet?

2. Why on tablet you want display only one portfolio.
It use javascript to set position of portfolio, if you only want to show 1 portfolio on tablet and it is in center you can use custom css in JanStudio > Theme Option > General Layout > Custom CSS

@media only screen and (max-width: 800px) and (min-width: 768px) {
#portfolio-2242 { left: 50%;transform: translateX(-50%);}
}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[theSA]

Hi Harry,

My questions sum up to – how do I make it look better on tablets?

It’s not that my choice is to only show one image, my problem is that it’s only one image showing and it’s huge and aligned left. So either I want one image (smaller), or 2+ columns but then all of them have to be shown (and smaller).

What is your recommendation?

• change size so that two columns is shown?
• only have one image (and smaller)

Regards,
Anna

[Harry]

Hi,

I Saw you add 2 portfolio elements http://take.ms/49wyN

– One only show on desktop and hide on tablet/mobile (it show 4 portfolios)

– One hide on desktop and show on tablet/mobile (it have 1 portfolio)

If you want to fix you only need to remove one and change your config by edit wrap columns

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[theSA]

Hi Harry,

Thanks, yes the option to have two difference rows for desktop tablet/mobile was a try to make it look better. The solution you suggest (changing 1 to more) I’ve tried before but it looks so weird as the images are huge – it’s not an option as it’s not user friendly. So for now I stick with 1 image…

The wrap option made it centered – thanks for that. But I have a page with only portfolios (https://theskinagent.com/press-och-media/). When full width and wrap is set, none of the portfolios is shown in tablet and mobile view. So the problem isn’t all solved with that solution. What can I do?

• So please yes, can you help me resize the images on tablet view so that portfolios is shown in a row of two (or three if they not get too small)?… similar to the options in the blog.
  I’d love if the portfolios were shown like a masonry.
• And please, also help me make the images a bit smaller on mobile view.

This is options I’d love to be able to set myself, like I can for product images in the webshop.

Thanks,
Anna

[Harry]

Hi Anna,

I still confuse. (Now you want on desktop show 4 portfolios on a row, and on tablet show 2 or 3 portfolios on a row, on mobile show 1 portfolio on a row?).

I checked you homepage it show 1 portfolio on tablet, it not good.

I checked https://theskinagent.com/press-och-media/ on my phone it still show all portfolios with 1 portfolio on a row. (you want the image smaller and have more white space on left and right?)

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[theSA]

Let’s put in like this:

• For desktop it works with four in a row – viability  is good and it’s user friendly
• For tablet I don’t think four in a row is possible for the viability  – the images will be too small. Two or three in a row can possible look good.
• On mobile I guess it will be best with one in a row.

As of now:

• As I wrote earlier I have now chosen to show 1 image in tablet mode, as I can’t have more than one as the images are too big as they are now.

My wish:

• A nice, user friendly flow in all modes.
• Tablet: 1) smaller images 2) show columns (2 or 3, depending on how small the images get, ie the viability) OR smaller images when if only one can be shown per row (even if that means more white on the sides).  
• Mobile; don’t mind, keep it as it is. A slide mode like for the blog could be a future feature.

About the presentation on https://theskinagent.com/press-och-media/ I’ve not published any changes as full width and wrap didn’t work when I tested it – as I mentioned the images don’t show. I want the same viability for this page as is made in the index (the main question relates to our index page). But what confused me was that no images was shown when setting full weight and wrap.

[Harry]

Hi,

1. I changed config of portfolio on homepage use default setting

– Desktop show 4
– Tablet show 2
– Mobile show 1

You don’t need create new block for only mobile

2. https://theskinagent.com/press-och-media/ Could you clear cache or tell us which device you check? I checked on iphone7 iOS 10.3.3 it still show the images

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[theSA]

Hi,

1. Please see attached screen shots from tablet views – it’s not looking good.
   There’s an empty space before the first portfolio.
   The images doesn’t all show.
2. I use the tool in WordPress to check on updates before I publish (attached screen shot) – I don’t want anything published before I’m satisfied with the result. Like for exempel now when it doesn’t look good at all in tablet view (question 1), I’d prefer if it wasn’t published.

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

Did you try clear cache on your ipad? I check on simulator it load slow but still display normal (you have to wait for about 3-5s to load all portfolios

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts