Problem in images with text on mobile

New Member
4 0 0

Hello! I have used gempages to create my product page. On the desktop version everthing is fine, but in the mobile the

spaces between the images and texts are all messed up. Also i want the text to be on the top of the image.

Mobile Version.pngThe mobile versionPC VERSION.pngDesktop 

0 Likes
Shopify Expert
2505 420 529

Hi @moonlightof 

Send your store url

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes

Hello @moonlightof ,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

@media only screen and (max-width: 767px) {
#r-1575814598033,#r-1575814425866 {
	display: flex !important;
	flex-direction: column;
}
#c-1575814598114,#c-1539334939701 {
	order: 2;
	margin-top: 15px;
}
#e-1575855142037 .gf_image,#e-1575855269341 .gf_image,#e-1575853577875 .gf_image {
	width: 100% !important;
}
#c-1575814602125,#c-1539334940899 {
	margin-top: 15px;
}
#e-1575854612934,#e-1575853988054 {
	margin-top: 0;
}
}
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
Shopify Partner
1147 93 141

Please Share a store url to better assist

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
0 Likes
New Member
4 0 0

 

Thanks. It works. Now i need to adjust the space between the text and images.

 

PAGE.png

 

  my url: moon-light-official.com

0 Likes
Shopify Expert
2505 420 529

Add this css:

@media (max-width: 767px){
 #e-1575854612934,#e-1575853988054 { margin-top: 0 !important; }
}

May be you have to remove existing css. 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes

@moonlightof,

Please add !important

@media only screen and (max-width: 767px) {
#e-1575854612934,#e-1575853988054 {
	margin-top: 0 !important;;
}
}
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
New Member
4 0 0

I put on the bottom of the last code, but nothing happens

0 Likes
Shopify Expert
2505 420 529

That's because of you have already important css added as inline so you have to remove it first.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes

@moonlightof,

Add below css..

It will help you

@media only screen and (max-width: 767px) {
.module #e-1575854612934, .module #e-1575853988054 {
	margin-top: 0 !important;;
}
}
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