Join us today @ 1pm EDT for an AMA with 2H Media: Holiday Marketing for Your Shopify Store and have your marketing questions answered by marketing experts 2H Media | Plus watch the 2H Media AMA Livestream on Twitch!

Why aren't my homepage images clickable after adding rounded corners?

Why aren't my homepage images clickable after adding rounded corners?

pallavharia
Tourist
6 0 2

Hey Guys, 

 

I added rounded corners(border radius) to my images by editing the code. After doing this, the rounded corners only show when I adjust the image height to "adapt to image". Because of this, the images are not clickable. How can I fix this? www.tulum.coffee

 

Replies 4 (4)

KetanKumar
Shopify Partner
37045 3644 12028

@pallavharia 

oh sorry for that issue please share that section code so i will check and upate

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
pallavharia
Tourist
6 0 2

/*================ Hero and slideshow headers ================*/
.mega-title,
.mega-subtitle {
color: $color-overlay-title-text;
.hero & {
text-shadow: 0 0 4px $color-text-shadow;
}
@include media-query($medium-up) {
text-shadow: 0 0 4px $color-text-shadow;
}
}

.mega-title {
margin-top: 300px;
-webkit-text-stroke: 0px black
}

.mega-title--large {
font-size: em($font-size-header + 8);

@include media-query($medium-up) {
font-size: em(floor($font-size-header * 2.5));
}
}

.mega-subtitle {
@include media-query($medium-up) {
font-size: em($font-size-base + 4);
margin: 0 auto;

.text-center & {
max-width: 75%;
}
}

p {
color: $color-overlay-title-text;
}

a {
color: $color-overlay-title-text;
border-bottom: 10px solid currentColor;

&:hover,
&:focus {
color: $color-overlay-text-focus;
}
}
}

.mega-subtitle--large {
font-size: em($font-size-base + 2);
font-weight: $font-weight-header;

@include media-query($medium-up) {
font-size: em($font-size-base + 8);
}
}

pallavharia
Tourist
6 0 2

.hero-fixed-width {
position: relative;
@include overlay(1);
}

.hero-fixed-width__content {
position: absolute;
top: 50%;
left: 0;
right: 0;
z-index: 2;
@include transform(translateY(-50%));
}

.hero-fixed-width__image {
width: 100%;
height: 100%;
max-width: 100%;
margin: 0 auto;
display: block;
object-fit: cover;
// Used for the IE lazysizes object-fit polyfill
font-family: "object-fit: cover";
overflow: hidden;
border-radius: 15px 15px 15px 15px;
}

.hero-fixed-width__image {
border-radius: 15px 15px 15px 15px;
box-shadow: 2px 15px 10px 0 rgba(0,0,0,.2)
}

KetanKumar
Shopify Partner
37045 3644 12028

@pallavharia 

i need full code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing