Mutli row mobile view

thekidreyz
Tourist
10 0 1

Can someone help me to make multirow in mobile view to be in two column? I want it to look like text and image on same row instead of text displaying under the image.

Screenshot_20240509_105020_Samsung Internet.jpg

Replies 3 (3)

Dejanrobi
Shopify Partner
1 0 0

Hello, on the div container that holds  that content, you can set it on mobile view to:

 

display: flex

flex-direction: row

Just go to edit code, select the section then make customizations on mobile view.
If you are having a problem, maybe I can schedule a google meeting and help you out

 

MDR
thekidreyz
Tourist
10 0 1

If you don't mind would you like to specify for me? 

The website URL is www.critterlamp.com

BSSTech-Venture
Shopify Expert
237 46 52

Hi @thekidreyz ,

 

Please follow these steps:

1. Navigate to Online store => Themes => Edit code

BssTechVenture_0-1715327037346.png

 

2. Find theme.css file and add the CSS 

Wrap the CSS inside this to apply the code on mobile screen only

@media screen and (max-width: 400px) {
  // your code css
}

 

In div class "image-with-text__grid", add width for 2 child divs so that the total width of them is 100%

 

BssTechVenture_1-1715329026810.png

 

In the div containing the text description, add the following CSS properties to align accordingly:

 

BssTechVenture_2-1715329105382.png

 

Hope this will help

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development