Re: Homepage images are not clickable

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
37139 3648 12061

@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
37139 3648 12061

@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