How can I arrange text above images in mobile view on Brooklyn theme?

Store Design
1

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

2

could you explain me your problem .

3

Thanks for your fast reply.

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

1.PNG
1.PNG478×836 10.4 KB

4

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

5

Hello safak,

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

6

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

7

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?

8

Hello safak,

Do you want in below format

2019-11-25_image.jpg
2019-11-25_image.jpg623×677 19.7 KB

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

Exactly. Thank you so much.

10

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?

11

@BrPlLo ,

Can you please share your site url

12

hi @oscprofessional , this is what it looks like right now: https://ptnbaduxutngfxm2-39621656730.shopifypreview.com

Is this what you are looking for?

13

I need to get this exact same done in dawn theme, but this for some reason wont work. Any help?

14

Same problem, any help ?