Image appearing too small

Support
#21

Hi I ended up using the X Theme for the buttons. Is there anything I can just edit with X Theme to fix it?

There is no gap top or bottom between the two elements. Would you be able to check it by logging in? Thanks!

#22

Hi,

You can try adding this in your column elements CSS (where your grid resides)

$el {
  max-height:680px;
  overflow:hidden;
}

Hope that helps

#23

Thanks. Is there any way to make my buttons more like -

Where when hovered over, it turns a different color? My site is digitalnomadquest.com/home jfyi. I’m using X Theme Cornerstone instead of The Grid for these. I’m just linking images to make them like buttons. Thanks!

#24

Hi Sharon,

That’s doable with custom CSS, example, please add this CSS to your global custom CSS (Theme Options > CSS) along with your preferred background color (this time, I use green as an example)


.x-image.with-hover, .x-image.with-hover:hover {
     background: green !important;
    }
.x-image.with-hover img {
    -webkit-transition: opacity 0.5s; /* Safari */
    transition: opacity 0.5s;
}
.x-image.with-hover:hover img{
   opacity: 0.5;
}

Then simply inspect your image element (in your screenshots) and add with-hover to each’s Class option field.

This should serve as a snippet so you could start, but we can’t provide support or cover this for further enhancement or bugs.

Thanks!

#25

This is awesome! Is there any way to make the color a specific HEX #?

#26

Hello Sharon,

Thanks for updating the thread. :slight_smile:

You can update the code with following:

.x-image.with-hover, .x-image.with-hover:hover {
background: #008000 !important;
}

Thanks.

#27

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.