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
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 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; } }
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?
User | Count |
---|---|
566 | |
215 | |
129 | |
83 | |
45 |