How to adjust mobile collections page without affecting desktop view?

Store Design
, , ,
1

So i have created a collections page, and on desktop it is perfect and centered, but when i go on my phone the collections are off center and too small. How do i fix this without changing the look of my website on desktop? I have previously posted to find a solution but couldn’t find one, so any help would be much appreciated.

Theme: Dawn

Website: desire-online.net

url : https://desire-online.net/collections

Screenshot (97).png
Screenshot (97).png1920×1080 371 KB

phone not center.jpg
phone not center.jpg1170×2532 183 KB

2

Hello @jakegrieveson

Its Artzen Technologies! We will be happy to help you today.

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find bass.css file

  4. Add the following code in the bottom of the file

@media screen and (max-width: 767px){
	section#shopify-section-template--19958073753890__5384b4b2-1ee6-4cd1-a5eb-66acd626d532 {
		margin: 0;
	}
	.card__inner.color-background-2.gradient.ratio, .card__content {
		width: 100%;
	}
}

after that look like this :–

Artzen_tech_0-1693203129558.png
Artzen_tech_0-1693203129558.png573×620 247 KB

Let me know if need further assistance
Regards,
Artzen Technologies

3

Unfortunately this didn’t work, what would the issue be?

4

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find Theme.liquid file

  4. Add the following code in the bottom of the file before tag