Shopify themes, liquid, logos, and UX
Hi,
On mobile view the text moves under the image. How can I change this to the opposite (text should be above)?
I'm using the Brooklyn theme.
Thanks
Solved! Go to the solution
This is an accepted solution.
Hello safak,
Do you want in below format
Then,
1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file
@media screen and (max-width: 768px) { .feature-row__item { order: 2; } .feature-row__item.feature-row__text { order: 1; } }
could you explain me your problem .
Shopify ,Shopify plus and Shopify 2.0 theme developer and customization
I Would like to add new functionality or customize an existing one, please hire me.
If helpful then please Like and Accept Solution .
Email: ashiquehussaincodediary@gmail.com
Thanks for your fast reply.
Now it looks like the pic below. I want the text to be above the image.
use css for this .using css ,you can do this.
Shopify ,Shopify plus and Shopify 2.0 theme developer and customization
I Would like to add new functionality or customize an existing one, please hire me.
If helpful then please Like and Accept Solution .
Email: ashiquehussaincodediary@gmail.com
Hello safak,
Please share your site url So that I will give you solution
use something like this:
.slideshow__text-content {
text-align: center;
position: absolute;
width: 100%;
top: 50%;
-ms-transform: translateY(-40%);
-webkit-transform: translateY(-40%);
transform: translateY(-40%);
opacity: 0;
transition: all 0.6s cubic-bezier(0.44, 0.13, 0.48, 0.87);
transition-delay: 0.3s;
z-index: 3;
}
Shopify ,Shopify plus and Shopify 2.0 theme developer and customization
I Would like to add new functionality or customize an existing one, please hire me.
If helpful then please Like and Accept Solution .
Email: ashiquehussaincodediary@gmail.com
@ashiqueh4 wrote:use something like this:
.slideshow__text-content {
text-align: center;
position: absolute;
width: 100%;
top: 50%;
-ms-transform: translateY(-40%);
-webkit-transform: translateY(-40%);
transform: translateY(-40%);
opacity: 0;
transition: all 0.6s cubic-bezier(0.44, 0.13, 0.48, 0.87);
transition-delay: 0.3s;
z-index: 3;
}
I tried a few things like text-align and position under "feature-row__text" but it doesn't work
I found that this css is related to the "image with text" section
.feature-row { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; -webkit-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; } @media screen and (max-width: 768px) { .feature-row { -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } } .feature-row__item { -webkit-flex: 0 1 50%; -moz-flex: 0 1 50%; -ms-flex: 0 1 50%; flex: 0 1 50%; } @media screen and (max-width: 768px) { .feature-row__item { -webkit-flex: 1 1 100%; -moz-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; max-width: 100%; } } .feature-row__image-wrapper { position: relative; } .no-js .feature-row__image-wrapper { clip: rect(0 0 0 0); clip: rect(0, 0, 0, 0); overflow: hidden; position: absolute; height: 1px; width: 1px; padding-top: 0 !important; } .feature-row__image-no-js { display: block; margin: 0 auto; } @media screen and (max-width: 768px) { .feature-row__image-no-js { order: 1; } } .feature-row__image { display: block; margin: 0 auto; width: 100%; position: absolute; top: 0; right: 0; left: 0; } @media screen and (max-width: 768px) { .feature-row__image { order: 1; } } .feature-row__text { padding-top: 35px; padding-bottom: 35px; } @media screen and (max-width: 768px) { .feature-row__text { order: 2; padding-bottom: 0; } } @media screen and (min-width: 769px) { .feature-row__text--left { padding-left: 35px; } .feature-row__text--right { padding-right: 35px; } }
Can it be the code itself and not css?
This is an accepted solution.
Hello safak,
Do you want in below format
Then,
1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file
@media screen and (max-width: 768px) { .feature-row__item { order: 2; } .feature-row__item.feature-row__text { order: 1; } }
Exactly. Thank you so much.
Hey @oscprofessional , thank you for the solution, this works! However, now the problem is that the button moves about the picture. I'd like the button to go below the image. Do you have the solution to that as well?
Can you please share your site url
hi @oscprofessional , this is what it looks like right now: https://ptnbaduxutngfxm2-39621656730.shopifypreview.com
Is this what you are looking for?
Same problem, any help ?
I need to get this exact same done in dawn theme, but this for some reason wont work. Any help?
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024