Image with text on mobile

[safak]

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

[ashiqueh4]

could you explain me your problem .

[safak]

Thanks for your fast reply.

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

[ashiqueh4]

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

[oscprofessional]

Hello safak,

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

[ashiqueh4]

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

[safak]

---

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

[oscprofessional · 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;
}
}

[safak]

Exactly. Thank you so much.

[BrPlLo]

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?

---