Button Layout on Mobile

Adam171
Tourist
11 0 5

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.

Adam171_0-1618156020917.png

 

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?

 

Adam171_1-1618156118288.png

 

 

Thanks in advance!!!

dmwwebartisan
Shopify Partner
6508 1512 1982

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

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
Adam171
Tourist
11 0 5

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?

Adam171_1-1618211244701.png

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?

Adam171_2-1618211374129.png

 

Thank you!

0 Likes
dmwwebartisan
Shopify Partner
6508 1512 1982

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

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
Adam171
Tourist
11 0 5

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:

Adam171_2-1618216381475.png

Adam171_1-1618216329483.png

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. 

Adam171_3-1618216423529.png

 

 

0 Likes
dmwwebartisan
Shopify Partner
6508 1512 1982

add following CSS class mobile button height.

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

Hope this works.

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
Adam171
Tourist
11 0 5

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

Adam171_0-1618221558891.png

 

Actual view on mobile

Adam171_1-1618221673047.png

 

 

dmwwebartisan
Shopify Partner
6508 1512 1982

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

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
Adam171
Tourist
11 0 5

Hi

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

 

Adam171_0-1618225992628.png

 

0 Likes
Adam171
Tourist
11 0 5

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!

 

B0CE73AD-D11D-4684-80A9-096763BCC870.png

0 Likes