Two columns mobile version

Please post the url to your site.

Impressiowebshop.hr

Mobiles come in a large number of viewport widths.

The site is showing me one column of products up to 480px viewport width, and two columns from 481px to 599px, then 3 columns. Looks good here. What would you like to achieve in terms of columns to viewport widths?

Well, on computer/tablet view i have 3 columns with 4 rows. On mobile version of my website, if I use portrait mode I only have one columns with each product under one by one or if I use my phone on landscape, I have 3 cols-4 rows. I would like to achieve at least two columns on portrait mode on phone.

Thanks for helping

The thing is mobiles come in lots of different widths. I once found a table where someone had collected 40 widths for various mobiles in portrait and landscape orientations. What you need to say is what is the break point between one and two columns. Currently its at 480px. Do you know the viewport width of the phone you are using to view the site?

I am currently using iPhone X. I don’t know what phone would be the best example to guide… maybe to add one css for iPhone X and one for let’s say Samsung galaxy S9? I think that phone models could be best examples for either of those to firms that create mobile phones.

I have this CSS code in my additional CSS section and it’s not working

@media only screen and (max-width: 736px) {
.avia_textblock pre, .responsive #top #main .products .product {
width: 45.6% !important;
margin: 0 4% 1% 0;
}} 

I think your css doesn’t work because I can’t find a .responsive class in the page or a #top id.

Not only have you got to set the width of li.product elements, but you also need to prevent the new-lines every 3 and put in new-lines every 2. Try this:

@media only screen and (max-width: 736px) {
  .woocommerce ul.products li.product {
    width: 49.0% !important;
    margin: 0.5% 4% 0.5% 0;
  }
  body.woocommerce ul.products.columns-3 li.product:nth-of-type(3n+1) {
    clear: none !important;
  }
  body.woocommerce ul.products.columns-3 li.product:nth-of_type(2n+1) {
    clear: both !important;
  }
}

Two columns is too tight on very small screens. There’s a lot of work to do to get this right for various resolutions.

You can flick quickly between different viewport widths on your desktop using this Chrome extension:
https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=en

For emulating the smaller viewport widths, you’ll need the inspector panel open and positioned to one side, not at the bottom.

Hi, thanks for the reply, code looks great and works.
I just wanted to ask you, how can I increase a photo size for a bit? Because, maybe you saw on my site, I have tri little boxes and one wide box and those boxes cover most of the photo.

Thanks

You can reduce the padding on the li.product elements. Its 15px, you can reduce it to say 4px with:

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  padding: 0 4px !important;
}

Ok, Thanks i will try that.
I saw your reply on some other topics regarding text under product photo.

https://ibb.co/g7zSn6Z

On that image, I would like to add text on places where I drew black boxes. Is there a way to add different text for each product?

This resource shows where the hooks are:
https://hooks.wpdesk.org/shop/

So you can hook into the page just under the product photo, then your function can show the text. It would need to pull in the text from a custom field from each product page. That’s a bit more development work than you’re likely to get in a forum answer.

Someone else might know of a plugin for it.

Great site but do I need to create a custom PHP function in functions.php for the hook I need?

https://ibb.co/PCmygRk
I pasted the new part of code under the old one and still like this. Do I need to delete some part of old code and paste new on that place?

Yes you’ll need to develop a function and put it in functions.php for your child theme. You don’t delete the old code. Don’t edit core files. Your function hooks into the prorgam flow if its done right. PHP skills will be needed to get it to work.

Part about deleting old part codes was regarding Two columns and the last code edit you provided me about padding