Return to previous page

2 products beside each other on a mobile device

This topic has 7 replies, 4 voices, and was last updated 9 years, 4 months ago ago by Eva Kemp

Andre

Participant

July 4, 2015 at 12:53

Guys i have in a previous support thread: https://www.8theme.com/topic/2-products-beside-each-other-on-mobile/.

Got some advice on how to put 2 products beside each other which works brilliant to put 2 products beside each other on a page. The problem i am realising now is that when i click into a product it is now only half the screen on a mobile device: http://prntscr.com/7oosij

Ideally i would like that when i click into a product it fills the screen & not only half the screen

The css that i used was:

@media only screen and (max-width: 480px){
.product {
width: 50% !important;
}}

#73147 Copied Theme version: Latest WooCommerce version: Latest

6 Answers
Eva Kemp

Support staff

July 6, 2015 at 09:22
Hello,

Instead of this code
```
@media only screen and (max-width: 480px){
.product {
width: 50% !important;
}}
```
try to use this one:
```
@media only screen and (max-width: 480px){
.products-grid .product { {
width: 50% !important;
}}
```
Regards,
Eva Kemp.
#73266 Copied
michaelcp23

Participant

July 6, 2015 at 20:01

This was a topic I was looking for too, thanks this helped a lot! 🙂

#73502 Copied

Robert Hall

Support staff

July 6, 2015 at 20:20

Hello @michaelcp23,

You’re welcome!

Regards,
Robert Hall.

#73507 Copied

Andre

Participant

July 7, 2015 at 10:54

Thanks Eva i have used that code now & it has put the page content back to 1 item wide & when you click on it is the full width of the mobile phone.

Can i have it that when you go to a product page it is 2 wide on the screen. but when you click on the product it is 100% wide?

#73630 Copied

Andre

Participant

July 7, 2015 at 11:06

Sorry Eva there was an extra “{” in the code so i edited it & it seems to have worked. Thanks

#73634 Copied

Eva Kemp

Support staff

July 7, 2015 at 11:13

Hello,

You’re welcome.

Regards,
Eva Kemp.

#73636 Copied
Viewing 7 results - 1 through 7 (of 7 total)

The issue related to '‘2 products beside each other on a mobile device’' has been successfully resolved, and the topic is now closed for further responses

2 products beside each other on a mobile device

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection