Hi all, so on my website on desktop version everything is in perfect positions, however on mobile the CTA button is way too big and in the wrong spots. how can I change it?
Also, how do I make slideshow on the mobile to be as large as on the desktop without cutting off the sides? Thank you!
Hi @Beautage
Check this one.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 749px){
.banner__box {
align-self:end;
}
a.button.button--primary {
padding: 5px 10px;
}
.slideshow__text.banner__box {
padding-bottom: 1rem;
}
}
And Save.
Result:
Note: What do you mean edge cutting on the mobile screen? on my end it not cutting on the mobile. You can check on my SS.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Hi,
So this code just changed the position of CTA buttons, which is not exactly what I am looking for. I want CTA buttons to be in the same spots as on the desktop, just smaller, as at the moment the buttons are covering up the text.
For the cutting off bit, I meant that if I change image size to let’s say medium or large on shopify then it cuts off the sides of the image on mobile. Currently is set “adapt to first image”, but I would like on mobile to show whole image, just in larger scale if that makes sense?
Oh, Im just following what you’ve said, you clearly post change the size and position. If only the size then check this one. Same Instruction.
@media only screen and (max-width: 749px){
a.button.button--primary {
padding: 0 10px;
min-height: 4rem;
}
}
And save.
Result:
Oh, Do you mean changes of the slide height right? We can change the height but im not sure if youll like the result. It will be squeeze the picture when it gets more smaller screen. You can check it. Same instruction paste the code in the base.css.
@media only screen and (max-width: 749px){
div#Slide-template--19097448644873__slideshow_iaedUU-1 {
height: 70vh;
}
.slideshow__media.banner__media.media img {
object-fit: fill;
}
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Hi,
Thank you! I played around with numbers, both solutions works. Just one small issue, on the slideshow, mobile version, CTA button on the second slide is still the same, nothing has changed. Any advice?
