How can I properly align a larger image in the Debut theme on mobile?

Store Design
1

I am trying to make the image larger in the image with text section in my store. I was only able to find one community post about this, but the answer given was outdated I believe, the code doesn’t work anymore. I am currently using the debut them. I experimented with the code for hours, until I found where exactly to do this.

I was able to increase the size by increasing the width in theme.css. Please check code below:

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

However, when I do this, the image no longer works properly on mobile. It seems to be stuck to the right side of the screen. I tried my best to align the image, but it simply doesn’t. If anyone would like to offer any suggestion on how to increase the image and make it align properly on mobile, it would greatly be appreciated.

2

@yousef24 - wrap css in media query so it will change on desktop only, so your code should be

@media screen and (min-width:1025px)
{
.feature-row__image {
display: block;
margin: 0 auto; }

.feature-row__image-wrapper .feature-row__image {
width: 100%;
position: absolute;
top: 0; }
}
3

hii, @yousef24
kindly share your store URL so,
I can solve your issue and give you a proper solution.
Thank You.

4

@suyash1 Thank you for the fast reply. But unfortunately, I’m still having the same problem when viewing on mobile, using the code you provided.

Here is a longer snippet of my code, if it helps.

supprot.jpg
supprot.jpg1205×205 20.5 KB

I increased the width which does work, but on mobile, the image is broken.

5

@Zworthkey Hello, unfortunately, the store is still under development, if you could help out given the code above, I would greatly appreciate it,

6

@yousef24
Paste this code on top of the theme.scss file.

@media screen and (min-width:992px)
{
.feature-row__image {
display: block !important;
margin: 0 auto !important;  
}

.feature-row__image-wrapper .feature-row__image {
width: 100% !important;
position: absolute !important;
top: 0 !important;
 }
}

Thank You.

7

@Zworthkey Thank you so much! this fixed the problem of the image sticking. However, when I try to increase the size, the changes work for desktop, the image gets larger, but not on mobile, any idea why?

8

@yousef24
Because you are using the code into the media query that works only on desktop, not for mobile.
if you want to increase size in mobile view use code outside the media query.
Thank You.

9

@Zworthkey Hi, could you please explain what I’m supposed to do to fix this issue? I tried changing the code from @media screen and (min-width:992px) to @media screen and (max-width:992px). It did make the image larger on mobile, but now the desktop image is back to the original size, and the mobile image is off-center and is pushed to the right side of the screen.

10

@yousef24
Use code in this media query for the mobile version.

@media only screen and (max-width: 768px) {

}

Thank You.