CSS GRID COLUMNS MOBILE AND PC

Solved
Highlighted
New Member
17 0 0

Is it possible to use GRID to arrange such columns for a desktop computer and a mobile phone?

PC: 1/4 1/4 1/2 MOBILE: 1/1 (one-hole)



COLUMNS_GRID.jpg

0 Likes
Highlighted

Hello @qbiqbi,

Yes its possible

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
17 0 0

can you tell me how to do this?

0 Likes
Highlighted

Success.

Try this code..

<div class="grid__item">
    <div class="grid">
      <div class="grid__item medium-up--one-half">
			<div class="grid">
				<div class="grid__item medium-up--one-half">
					//Put code here
				</div>
				<div class="grid__item medium-up--one-half">
					//Put code here
				</div>
				<div class="grid__item medium-up--one-half">
					//Put code here
				</div>
				<div class="grid__item medium-up--one-half">
					//Put code here
				</div>
			</div>
		</div>
      <div class="grid__item medium-up--one-half">
        //Put code here
      </div>
   </div>
</div>
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
17 0 0

Thanks for your reply.

I added as you wrote and I do not know why, but in the preview (by clicking the preview on product page) I see the columns nicely but when I enter the incognito store on the phone and on the laptop there are no columns: /

I cleared my browsing history.



0 Likes
Highlighted

@qbiqbi,

Can you please share URL

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
17 0 0

i sent you on prv message

0 Likes
Highlighted

@qbiqbi,

can you please share screenshot of on which section you applied the code

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
17 0 0

Thanks! Its working :))

0 Likes