Button Layout on Mobile

[Adam171]

Hi Everyone

I have two questions I am hoping a shopify Guru can help me with on my website in terms of button layout and slideshow view on mobile and desktop. 

my website is www.hausofstyle.co.uk

1)  On the desktop version of my website, how can I make my button lower?  The "Shop Cushions" button.

2) On the mobile version of the website, how can I resize the image so it looks like it does on the desktop version, and also, how can I move my button up so it is on the image?

Thanks in advance!!!

[dmwwebartisan]

@Adam171 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

/* desktop */
@media screen and (min-width: 769px){
.slides__text-content{ top: 75% important; }
}

/* for mobile */
@media screen and (max-width: 768px){
#flexslider--slider .slides__image{ object-fit: contain !important; height: 230px !important; }
.slides__text-content--mobile{ position: absolute !important; top: 48%; }
}

Hope this works.

Thanks!

[Adam171]

Hello

Thanks for your suggestions.

For the desktop version, nothing has really changed.  Ideally I would like it a little bit lower, please can you advise how to do that?

For the mobile version, that has moved the button up but the button is large and takes up the entire width of the window.  Please can you advise how I can make this smaller?

Thank you!

[dmwwebartisan]

@Adam171 

Remove following CSS class.

/* desktop */
@media screen and (min-width: 769px){
.slides__text-content{ top: 75% important; }
}

Add following New class for desktop 

.slides__text-content{ top: 75% important; }
/* code for slider button for mobile */
.slides__btn--mobile {
    display: inline-block;
    padding: 15px 12px;
    font-size: 0.6em;
    line-height: 1.2;
}

Hope this works.

Thanks!

[Adam171]

Hi dmwwebartisan

Thanks for your message.  It has helped resize the width of the button on mobile, but I am still having a couple of issues:

Please can you let me know how I would move the button down to the black box on the desktop version?  Below is the code I currently have:

Also for mobile, the location and width of the button is perfect, but the height is about twice as much as I would like it.  Please can you advise how I would change the size of the button? Similar to the size when viewed in Desktop. 

[dmwwebartisan]

add following CSS class mobile button height.

.slides__btn--mobile {min-height: 1.125rem;}

Hope this works.

Thanks!

[Adam171]

Thanks - do you know how I would make the box even smaller in height?  I tried changing the 1.125 to 0.80 and it didn't make much difference.

Also, also on the mobile preview the button is at the bottom of the image.  When I actually load it on my mobile, it is much higher up.

Mobile Preview on Shopify

Actual view on mobile

[dmwwebartisan]

@Adam171 

Please add the following code for the box height.

@media only screen and (max-width: 768px) {
.slider__controls-container { display: none;}
.slideshow-section { padding-bottom: 0px;}
}

Thanks!

[Adam171]

Hi

I have the same issue, it looks fine on preview, but on my actual mobile the button is too high.

[Adam171]

Hi

Please can anyone advise how to make the button appear lower on mobile?  The preview button position and the actual button position is completely different.

Thank you in advance!