Solved

Margins Padding - Image with Text Mobile - BLOG SECTION

Ryanp
Explorer
71 3 25

Hello - I am creating a custom template in the Blog Posts - I am using section "mage with Text" for the main body of text.  How can I get the padding adjusted for mobile view? Its too compressed.. need it to go out more.. Custom CSS code for the section would be great!   

 

Link to blog article - https://devildaves.com/blogs/devil-daves-bloody-mary-blog/hot-sauce-tasting-rehoboth-beach

 

blog section spacing mobile.jpg

Accepted Solutions (2)
Ryanp
Explorer
71 3 25

This is an accepted solution.

Thanks.. I adjusted the code for Mobile ONly - 

@media only screen and (max-width: 767px){
.image-with-text__content {
padding-left: 1rem;
padding-right: 1rem;
}

View solution in original post

Spac-es
Shopify Partner
361 104 125

This is an accepted solution.

.rich-text__wrapper {
  width: auto !important;
}
.rich-text__blocks {
  padding: 10px !important;
}

Result:

2.PNG

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!

View solution in original post

Replies 15 (15)

webwondersco
Shopify Partner
1103 164 161

@Ryanp add below line of CSS code in your custom CSS block.

 

.image-with-text__content{
padding-left:1rem;
padding-right:1rem;
}

 

You can update the rem value as per your taste.

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
Ryanp
Explorer
71 3 25

This is an accepted solution.

Thanks.. I adjusted the code for Mobile ONly - 

@media only screen and (max-width: 767px){
.image-with-text__content {
padding-left: 1rem;
padding-right: 1rem;
}

Ryanp
Explorer
71 3 25

I have an issue now.. When I add the multirow section - it send the margins of the Image with Text back to normal.. Any idea why that is happening? 

DutchDoorFarm
Tourist
4 0 1

Could you help me with the same issue? I want to add more margin space on the left and right to this image with text component of my site using the custom CSS block. Specifically I'd like it to be on just the desktop version:

https://dutchdoorfarm.com/

DutchDoorFarm_0-1715190795598.png

 

 

Spac-es
Shopify Partner
361 104 125

Add this code in your custom CSS block:

@media (min-width: 768px) {
  #shopify-section-template--17452401328381__text_image_with_text_rkLNAz .page-width.feature-row.homepage-featured-content {
  margin: 0 26px;
  }
}

Result:img.PNG

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
DutchDoorFarm
Tourist
4 0 1

Thank you so much! I must be doing something wrong. Do you see what I've possibly done wrong here?

DutchDoorFarm_0-1715254028060.png

DutchDoorFarm_1-1715254218608.png

 

 

Spac-es
Shopify Partner
361 104 125

Most likely, the custom CSS block is preventing the addition of @media queries for the code to be added based on the device's dimensions. Add the code to your theme-index.min.css file. You shouldn't encounter any issues there.

 

(EDIT): I didn't pay close enough attention to the error, the problem is with the ID: #shopify-section-template--17452401328381__text_image_with_text_rkLNAz. Remove it and it will work! The code would look like this:

@media (min-width: 768px) {
  .page-width.feature-row.homepage-featured-content {
    margin: 0 26px;
  }
}

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
DutchDoorFarm
Tourist
4 0 1

Thank you so much! I bought you a coffee. If I have one more simple issue like this, can I send it to you and buy another coffee?

DutchDoorFarm_0-1715256125276.png

 

Spac-es
Shopify Partner
361 104 125

I'm glad the code you added worked! Any other implementation you want to do, you can count on me! Thank you very much for the coffee, it's a big help.

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
DutchDoorFarm
Tourist
4 0 1

Here's the other item I was wanting help with. My current Subscribe/Newsletter feature (at the bottom of https://dutchdoorfarm.com) looks like this on desktop:

DutchDoorFarm_0-1715269309202.png

 

What code could I add to make it look like this on Desktop (bonus if the text can also be centered)? It already stacks like this on Mobile:

DutchDoorFarm_1-1715269510325.png

 

Not sure if this is something more complicated. Thanks in advance!

 

Spac-es
Shopify Partner
361 104 125

This change was more complicated than the previous one, but here is the code:

.homepage-section--newsletter-wrapper section.homepage-sections-wrapper.homepage-sections-wrapper--light .row {
  display: grid !important;
  justify-items: center;
}

.homepage-section--newsletter-wrapper section.homepage-sections-wrapper.homepage-sections-wrapper--light .col-12.col-sm-6.newsletter__item {
  max-width: 100% !important;
  text-align: center;
  text-wrap: pretty;
}

.homepage-section--newsletter-wrapper section.homepage-sections-wrapper.homepage-sections-wrapper--light .newsletter__item.col-12.col-sm-5.offset-sm-1 {
  margin: 0px auto !important;
  padding-top: 10px;
  min-width: 100% !important;
}

(I have made some other tweaks to the design to improve the visualization of the newsletter)

 

To clarify, for any further queries, you can send me private messages or create new posts in the community forum.

 

MOBILE:

mobile.PNG

 

PC:

 

pc.PNG

 

I hope this has been helpful for you!

 

 

 

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!

Spac-es
Shopify Partner
361 104 125

Add this code in your Custom CSS:

@media (max-width: 450px) {
  .image-with-text__content {
    padding: 15px !important;
  }
}

Result:

after.PNG

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
Ryanp
Explorer
71 3 25

Hey that worked great however - now the RICH text blocks are not lining up with the other margins..  Any idea how I can get the rich text margins?  Ive tried adding code for padding and even the one below.. 
.rich-text__blocks { max-width: 100% !important; }

 

margins rich text.jpg

Spac-es
Shopify Partner
361 104 125

This is an accepted solution.

.rich-text__wrapper {
  width: auto !important;
}
.rich-text__blocks {
  padding: 10px !important;
}

Result:

2.PNG

 

Any donation is welcome! https://www.buymeacoffee.com/spacescoffee Thanks in advance!
Ryanp
Explorer
71 3 25

Nice - Thank you so much! So in conclusion - I have the wrapper for Desktop with mobile included..  Worked like a charm.. Here is the final CSS I have.

.rich-text__blocks {
max-width: 100% !important;
}
.rich-text__wrapper {
width: auto !important;
}
.rich-text__blocks {
padding: 5px !important;
}