Mobile Search compare at price overlaps text in debut theme

Solved
Highlighted
New Member
3 0 0

Hello,

I'm having a problem with my site, specifically the mobile search page.

The site: www.thelustshop.co.uk

 

Whenever a search is done on mobile the compare at price is overlapping the the product title.

mobile problem.png

 

I'm not sure how to rearrange, resize or edit my site to remove this problem.

 

Any help would be much appreciated.

 

Tom.

0 Likes
Highlighted

Hello @Tom107 

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss.liquid

@media screen and (max-width: 749px) {
.list-view-items .list-view-item__price-column {
	display: block;
	overflow: hidden;
	float: left;
	width: 68% !important;
	text-align: left !important;
}
.list-view-items .list-view-item__title-column {
	float: left;
	display: block;
}

Hope this will work for you.
Thanks!

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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
3 0 0

Thanks for replying.

 

I tried what you suggested but it just broke the site. The Icons ( social media, cart, search etc) took up the whole page. The images were gone and the positioning was all removed in both desktop and mobile.

0 Likes
Highlighted

This is an accepted solution.

Hello @Tom107 

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss.liquid

@media screen and (max-width: 749px) {
ul.page-width.list-view-items .list-view-item__title-column {
	float: left;
	display: block;
	width: 90%;
	overflow: hidden;
}
ul.page-width.list-view-items .list-view-item__price-column {
	display: block;
	width: 100%;
	float: left;
	left: 0 !important;
}
ul.page-width.list-view-items .list-view-item__price-column .price {
	display: block;
	}
}

Hope this will work for you.
Thanks!

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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
3 0 0

Hi

Thanks very much. Worked Perfectly.

0 Likes