Shopify themes, liquid, logos, and UX
Dear all,
Can someone help with text with an image section in home page.
I need (i) that section to be full width (ii) background to the colour of the text, in that specific section, to be FAF7F3.
I use Brooklyn Theme.
I would appreciate some guidance here.
Thank you so much!
Asta
Solved! Go to the solution
This is an accepted solution.
Remove previous css class and add this new code
#shopify-section-1635612357e56831df{background-color: #FAF7F3 !important;}
#shopify-section-1635612357e56831df .wrapper {
max-width: 100% !important;
padding: 0 0px !important;
}
Please share store URL & screenshot what do you want !
Thanks!
Thank you for your quick response!
Please see my store URL, let me know if password is needed.
https://box-and-bow-nl.myshopify.com
Below is the section that I would like to get 100% width and the part that I have scribbled on should have a background colour FAF7F3
Please share store front password!
Thanks!
Try this code 1. Go to Online Store->Theme->Edit code 2. Asset->/theme.scss.liquid OR timber.scss.liquid ->paste below code at the bottom of the file.
#shopify-section-1635612357e56831df{background-color: #FAF7F3 !important;}
#shopify-section-1635612357e56831df .wrapper {
max-width: 100% !important;
padding: 0 30px;
}
Thanks!
Thank you very much. That part worked well - you are great!!!
Just the last one, is there a way to make the image to go until the left edge, as currently there is a little gap between an image and background.
Thanks again.
Asta
This is an accepted solution.
Remove previous css class and add this new code
#shopify-section-1635612357e56831df{background-color: #FAF7F3 !important;}
#shopify-section-1635612357e56831df .wrapper {
max-width: 100% !important;
padding: 0 0px !important;
}
Thank you this beautifully worked on the desktop version.
However, on the mobile version the text and the button is not in the centre - is there an easy way to align the text with the button on the mobile version in the centre?
I will also send you a separate email on another matter.
Thank you very much!
Asta
Try this code 1. Go to Online Store->Theme->Edit code 2. Asset->/theme.scss.liquid OR timber.scss.liquid ->paste below code at the bottom of the file.
@media screen and (max-width: 768px){
#shopify-section-1635612357e56831df .feature-row__text {
order: 2;
padding-bottom: 0;
padding-left: 20px !important;
padding-right: 20px !important;
}
#shopify-section-1635612357e56831df .btn{ margin: 0 auto !important; display: table !important;}
}
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024