Hello,
I am using the Refresh Theme and I am having 2 different issues. also i am using the code below to make images clickable links
a.link.animate-arrow:before {
content: "";
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
a.link.animate-arrow {
opacity: 0;
height: 0;
}
- I am attempting to reduce spacing between image and slider/button on mobile view. I have tried making margintop/ paddingtop 0 but have been unsuccessful.
- Also trying to correct image placement as you can see by image below they are offset to the left on mobile but centered in desktop view. I have tried justifycontent center / center and havent had any success.
https://482dd5-2.myshopify.com/
pw: littleboss
1 Like
Hi @420coupe
This is Henry from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file → Save
@media (max-width: 767px){
.media–portrait {
padding-bottom: 50% !important;
}
.multicolumn-card__info {
display: none !important;
}
li#Slide-template–17124883857572__0b21fc90-30d0-4cc9-8822-7462b311d46d-1 {
width: 92% !important;
}
.multicolumn-card.content-container img.multicolumn-card__image {
max-width: 100% !important;
}
}
Hope that my solution works for you.
Best regards,
Henry | PageFly
1 Like
This code resolved issue 1), however it now removed the clickable images that would take it to the link. I used the code below to make the images clickable links. It also randomly adds a new column that is nonexistent, ie showing 1/5 when there’s only 4 columns
a.link.animate-arrow:before {
content: “”;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
a.link.animate-arrow {
opacity: 0;
height: 0;
}
- i dont see it address the centering of images. See below to attached image, they are still offset to the left a bit. I tried adjusting width to 100% but didn’t work.
Hi @420coupe
Try 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){
.media--portrait {
padding-bottom: 50% !important;
}
ul#Slider-template--17124883857572__0b21fc90-30d0-4cc9-8822-7462b311d46d {
gap: 50px;
}
}
I attempted your code putting it into base.css and outcome is below
Results of putting it into theme.css
Neither really reduced the gap between image nor centered the image. Here was the previous code provided by other user that does reduce gap but removes link capabilities and doesnt address centering images. First and last image looks centered, but second and third are off center to the left. Also slider randomly showing 1/5 when there’s only 4
With the code below i was able to reduce gap a little bit while still maintaining image clickable to link. However not as small a gap as shown in yours, which is what i would like to achieve. Assuming the issue is with multicolumn.card__info, if display: none, it removes the clickable image
@media (max-width: 767px){
.media--portrait {
padding-bottom: 50% !important;
}
.multicolumn-card__info {
margin-top: 0 !important;
margin-bottom: 0 !important;
top: 0 !important;
bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.multicolumn-card.content-container img.multicolumn-card__image {
max-width: 100% !important;
}
}
I also removed this piece as this is what was adding an extra invisible column
li#Slide-template--17124883857572__0b21fc90-30d0-4cc9-8822-7462b311d46d-1 {
width: 92% !important;
}
Gap is reduced but i would like it how it shows with multicolumn-card__info {display: none} while still displaying the card__info as that’s what is tied to the clickable links.
