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
@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.
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;
}
Add this code in your Custom CSS:
@media (max-width: 450px) {
.image-with-text__content {
padding: 15px !important;
}
}
Result:
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?
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; }
.rich-text__wrapper {
width: auto !important;
}
.rich-text__blocks {
padding: 10px !important;
}
Result:
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;
}
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:
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:
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;
}
}
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?
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.
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:
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:
Not sure if this is something more complicated. Thanks in advance!
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:
PC:
I hope this has been helpful for you!
