Title: Two columns mobile version Last modified: July 31, 2019 --- # Two columns mobile version * Resolved [paskoberisic](https://wordpress.org/support/users/paskoberisic/) * (@paskoberisic) * [6 years, 9 months ago](https://wordpress.org/support/topic/two-columns-mobile-version/) * Hello, can someone help me regarding two columns on mobile version? * I am currently using StoreCommeerce theme and I would need CSS for this. * Thanks in advance Viewing 15 replies - 1 through 15 (of 18 total) 1 [2](https://wordpress.org/support/topic/two-columns-mobile-version/page/2/?output_format=md) [→](https://wordpress.org/support/topic/two-columns-mobile-version/page/2/?output_format=md) * [Peter Lawrenson](https://wordpress.org/support/users/lorro/) * (@lorro) * [6 years, 9 months ago](https://wordpress.org/support/topic/two-columns-mobile-version/#post-11787180) * Please post the url to your site. * Thread Starter [paskoberisic](https://wordpress.org/support/users/paskoberisic/) * (@paskoberisic) * [6 years, 9 months ago](https://wordpress.org/support/topic/two-columns-mobile-version/#post-11787183) * Impressiowebshop.hr * [Peter Lawrenson](https://wordpress.org/support/users/lorro/) * (@lorro) * [6 years, 9 months ago](https://wordpress.org/support/topic/two-columns-mobile-version/#post-11790819) * 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? * Thread Starter [paskoberisic](https://wordpress.org/support/users/paskoberisic/) * (@paskoberisic) * [6 years, 9 months ago](https://wordpress.org/support/topic/two-columns-mobile-version/#post-11790842) * 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 * [Peter Lawrenson](https://wordpress.org/support/users/lorro/) * (@lorro) * [6 years, 9 months ago](https://wordpress.org/support/topic/two-columns-mobile-version/#post-11790854) * 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? * Thread Starter [paskoberisic](https://wordpress.org/support/users/paskoberisic/) * (@paskoberisic) * [6 years, 9 months ago](https://wordpress.org/support/topic/two-columns-mobile-version/#post-11790874) * 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. * Thread Starter [paskoberisic](https://wordpress.org/support/users/paskoberisic/) * (@paskoberisic) * [6 years, 9 months ago](https://wordpress.org/support/topic/two-columns-mobile-version/#post-11790879) * 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; }} ``` * [Peter Lawrenson](https://wordpress.org/support/users/lorro/) * (@lorro) * [6 years, 9 months ago](https://wordpress.org/support/topic/two-columns-mobile-version/#post-11791254) * 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](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. * Thread Starter [paskoberisic](https://wordpress.org/support/users/paskoberisic/) * (@paskoberisic) * [6 years, 9 months ago](https://wordpress.org/support/topic/two-columns-mobile-version/#post-11795939) * 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 * [Peter Lawrenson](https://wordpress.org/support/users/lorro/) * (@lorro) * [6 years, 9 months ago](https://wordpress.org/support/topic/two-columns-mobile-version/#post-11796033) * 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; } ``` * Thread Starter [paskoberisic](https://wordpress.org/support/users/paskoberisic/) * (@paskoberisic) * [6 years, 9 months ago](https://wordpress.org/support/topic/two-columns-mobile-version/#post-11796091) * Ok, Thanks i will try that. I saw your reply on some other topics regarding text under product photo. * [https://ibb.co/g7zSn6Z](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? * [Peter Lawrenson](https://wordpress.org/support/users/lorro/) * (@lorro) * [6 years, 9 months ago](https://wordpress.org/support/topic/two-columns-mobile-version/#post-11796138) * This resource shows where the hooks are: [https://hooks.wpdesk.org/shop/](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. * Thread Starter [paskoberisic](https://wordpress.org/support/users/paskoberisic/) * (@paskoberisic) * [6 years, 9 months ago](https://wordpress.org/support/topic/two-columns-mobile-version/#post-11796167) * Great site but do I need to create a custom PHP function in functions.php for the hook I need? * [https://ibb.co/PCmygRk](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? * [Peter Lawrenson](https://wordpress.org/support/users/lorro/) * (@lorro) * [6 years, 9 months ago](https://wordpress.org/support/topic/two-columns-mobile-version/#post-11796245) * 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. * Thread Starter [paskoberisic](https://wordpress.org/support/users/paskoberisic/) * (@paskoberisic) * [6 years, 9 months ago](https://wordpress.org/support/topic/two-columns-mobile-version/#post-11796250) * Part about deleting old part codes was regarding Two columns and the last code edit you provided me about padding Viewing 15 replies - 1 through 15 (of 18 total) 1 [2](https://wordpress.org/support/topic/two-columns-mobile-version/page/2/?output_format=md) [→](https://wordpress.org/support/topic/two-columns-mobile-version/page/2/?output_format=md) The topic ‘Two columns mobile version’ is closed to new replies. * ![](https://ps.w.org/woocommerce/assets/icon.svg?rev=3234504) * [WooCommerce](https://wordpress.org/plugins/woocommerce/) * [Frequently Asked Questions](https://wordpress.org/plugins/woocommerce/#faq) * [Support Threads](https://wordpress.org/support/plugin/woocommerce/) * [Active Topics](https://wordpress.org/support/plugin/woocommerce/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/woocommerce/unresolved/) * [Reviews](https://wordpress.org/support/plugin/woocommerce/reviews/) * 18 replies * 2 participants * Last reply from: [Peter Lawrenson](https://wordpress.org/support/users/lorro/) * Last activity: [6 years, 9 months ago](https://wordpress.org/support/topic/two-columns-mobile-version/page/2/#post-11796350) * Status: resolved