Image with text section (Brooklyn mobile)

Tourist
14 0 0

Hi, I would like the make a small change to the image and text section from the Brooklyn theme. The section defaults with the text below the image (in mobile view). I need the header and text above the image for the mobile view. I have minimal coding skills and can not figure out how to change it. We are using the brooklyn theme, website is https://portafit.net. See image and code(I think this is what I would modify) below:

 

 

Capture.JPG

 

/*================ Partials | Featured row section ================*/
.feature-row {
@include display-flexbox();
@include justify-content(space-between);
@include align-items(center);

@include at-query($max, $medium) {
@include flex-wrap(wrap);
}
}

.feature-row__item {
@include flex(0 1 50%);

@include at-query($max, $medium) {
@include flex(1 1 100%);
max-width: 100%;
}
}

.feature-row__image-wrapper {
position: relative;

.no-js & {
@include visuallyHidden();
padding-top: 0 !important;
}
}

.feature-row__image-no-js {
display: block;
margin: 0 auto;

@include at-query($max, $medium) {
order: 2;
}
}

.feature-row__image {
display: block;
margin: 0 auto;
width: 100%;
position: absolute;
top: 0;
right: 0;
left: 0;

@include at-query($max, $medium) {
order: 2;
}
}

.feature-row__text {
padding-top: $section-spacing-small;
padding-bottom: $section-spacing-small;
text-align: center;

@include at-query($max, $medium) {
order: 1;
padding-bottom: 0; // always last element on mobile
}
}

@include at-query($min, $large) {
.feature-row__text--left {
padding-left: $section-spacing-small;
}

.feature-row__text--right {
padding-right: $section-spacing-small;
}
}

@include at-query($min, $large) {
.featured-row__subtext {
}
}

0 Likes
Highlighted

Hello 

You need to customize theme.liquid file to display text above.

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
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes