Increase padding for image with text component, mobile view, dawn theme

Solved

Increase padding for image with text component, mobile view, dawn theme

Verterra
Explorer
62 1 9

Hello! Does anyone know how to increase the bottom padding between each section of the image with text for mobile view? I am using dawn theme. 

 

Verterra_0-1720589108560.png

 

My store URL is: https://verterra.sg/password, password is VerterraTest123


I was recommended to use this code previously, but hoping not to use it this time because it increases the space for all pages, instead of just this section: 

.section + .section {
margin-top: 0 !important;
}

Any other solutions would be welcome. Thanks!

Accepted Solution (1)

Rahul_dhiman
Shopify Partner
226 42 41

This is an accepted solution.

Go to online store ---------> themes --------------> actions ------> edit code------->base.css -----> line number 6749
search this code

.rte > *:last-child {
margin-bottom: 0px;
}


and replace with this code

.rte > *:last-child {
margin-bottom: 15px !important;
}

 and the result will be
1.png

 

If this was helpful, hit the like button and mark the job as completed.
Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here

View solution in original post

Replies 6 (6)

AnneLuo
Shopify Partner
758 144 157

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

<style>
@media screen and (max-width: 749px) {
 .image-with-text{
   margin-bottom: 20px;
 }
}
</style>


Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

pwcsangeeta
Shopify Partner
44 4 9

Hello @Verterra 

Steps to Apply the CSS:
1.Login to your Shopify admin panel.
2.Navigate to Online Store > Themes.
3.Find your theme (Studio Theme) and click on "Actions" > "Edit code".
4.Open the theme.css or theme.css.liquid file in the assets folder.

Scroll to the bottom of the file (or find an appropriate section for custom CSS) and add your media query:

Adding the Custom CSS:

@media screen and (max-width: 749px) {
  .image-with-text {
    margin-bottom: 22px;
  }
}

 

Save the changes.
Buy me a Pizza
- If helpful then please Like and Accept Solution.

Thanks

Perennial
Shopify Partner
1466 114 233

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2 open component-image-with-text.css file

Paste the Code Bottom of file

.image-with-text__text-item.grid__item {
padding-bottom: 20px !important;
}

 

If you face any issue let me know

Thanks

Rahul_dhiman
Shopify Partner
226 42 41

This is an accepted solution.

Go to online store ---------> themes --------------> actions ------> edit code------->base.css -----> line number 6749
search this code

.rte > *:last-child {
margin-bottom: 0px;
}


and replace with this code

.rte > *:last-child {
margin-bottom: 15px !important;
}

 and the result will be
1.png

 

If this was helpful, hit the like button and mark the job as completed.
Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
Verterra
Explorer
62 1 9

Thank you!

Rahul_dhiman
Shopify Partner
226 42 41

Always there to help you.
Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here