Image with text on mobile

Solved
Highlighted
New Member
4 0 0

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

0 Likes
Highlighted

could you explain me your problem .

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

0 Likes
Highlighted
New Member
4 0 0

Thanks for your fast reply.

 

Now it looks like the pic below. I want the text to be above the image.

 

1.PNG

0 Likes
Highlighted

use css for this .using css ,you can do this.

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

0 Likes
Highlighted

Hello

Please share your site url So that I will give you solution

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes

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

0 Likes
Highlighted
New Member
4 0 0

@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?

0 Likes
Highlighted

Success.

Hello ,

Do you want in below format

2019-11-25_image.jpg

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;
}
}

 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
4 0 0

Exactly. Thank you so much.

0 Likes