How to simultaneously align sections on Dawn theme for both desktop and mobile?

Solved

How to simultaneously align sections on Dawn theme for both desktop and mobile?

kaysat
Tourist
7 0 0

Hi all. I am having issues getting the sections on my product pages to align with the Dawn theme. I have a custom liquid section, a rich text section, and a collapsible content section on each product page. I have successfully gotten the sections to align on my desktop computer. However, when I check the website on my mobile the rich text is out of alignment and collapsible content is squished.

 

Is there a way to make the three sections align on both the desktop and mobile simultaneously? I want the collapsible content and the rich text to be the same width as the custom liquid (because the custom liquid section fits the product photos better).

 

Here is a screenshot of the custom liquid, rich text and the collapsible content on the desktop:

 

kaysat_0-1666640224517.png

 

And here is a screenshot of it on my mobile:

310111294_529832558473538_4680799885555031031_n.jpg312364482_1702361183490545_4344020083905322589_n.jpg

 

Here is the link to the product page I am showing in the example: https://theaussieseedshed.au/products/zucchini-golden

 

The password is: shopifyexpertsplshelp

 

Thank you!!

Accepted Solutions (2)

layoutbase
Pathfinder
111 13 25

This is an accepted solution.

Hi @kaysat

Love your site so far. We took a look and wanted to provide you the following edits: 

  1. Go to Online Store->Theme->Edit code
  2. Assets/collapsible-content.css -> add the following: 

 

@media(max-width: 749px){
body .collapsible-content-wrapper-narrow {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}
}

 

 3. Assets/section-rich-text.css -> add the following: 

 

2. Assets/section-rich-text.css ->add code below to bottom of this file
@media(max-width: 749px){
body .rich-text__wrapper {
width: 100%;
}
}

 

 

Best regards, 

Layoutbase - Landing & Home page-builder

Please let us know if you find it helpful by giving us a LIKE and Mark as Solution. Layoutbase is a leading Shopify page builder. Give us a try!

View solution in original post

layoutbase
Pathfinder
111 13 25

This is an accepted solution.

p.s. Please add these codes to the bottom of the file.

Please let us know if you find it helpful by giving us a LIKE and Mark as Solution. Layoutbase is a leading Shopify page builder. Give us a try!

View solution in original post

Replies 3 (3)

layoutbase
Pathfinder
111 13 25

This is an accepted solution.

Hi @kaysat

Love your site so far. We took a look and wanted to provide you the following edits: 

  1. Go to Online Store->Theme->Edit code
  2. Assets/collapsible-content.css -> add the following: 

 

@media(max-width: 749px){
body .collapsible-content-wrapper-narrow {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}
}

 

 3. Assets/section-rich-text.css -> add the following: 

 

2. Assets/section-rich-text.css ->add code below to bottom of this file
@media(max-width: 749px){
body .rich-text__wrapper {
width: 100%;
}
}

 

 

Best regards, 

Layoutbase - Landing & Home page-builder

Please let us know if you find it helpful by giving us a LIKE and Mark as Solution. Layoutbase is a leading Shopify page builder. Give us a try!
layoutbase
Pathfinder
111 13 25

This is an accepted solution.

p.s. Please add these codes to the bottom of the file.

Please let us know if you find it helpful by giving us a LIKE and Mark as Solution. Layoutbase is a leading Shopify page builder. Give us a try!
kaysat
Tourist
7 0 0

Amazing @layoutbase It worked! Thank you so much for the simple fix!!