Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • February 2, 2024 at 4:10 pm #1432841
    MikeTandySwag

    Hi,

    How can I keep a 1/2 Column a perfect square as if it were a Masonry Gallery item? I’m looking to keep them square when a user has a mobile device.

    You’ll see the 4 items in the private content link.

    Also is it possible to have the image in the 1/2 column be slightly transparent as to show the background color? I’m going for an effect to have a darker gradient coming up from the button so that the text and button are more visible over the image.

    Thanks!

    • This topic was modified 9 months, 3 weeks ago by MikeTandySwag.
    February 3, 2024 at 9:56 pm #1432899
    Mike

    Hey MikeTandySwag,
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    @media only screen and (max-width: 767px) { 
.home #av_section_2 .flex_column.av_one_half {
    padding: 55% 50px 30px 50px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
.home #av_section_2 .flex_column.av_one_half {
    padding: 24% 5px 30px 5px;
}
}
@media only screen and (min-width: 1024px) and (max-width: 1439px) {
.home #av_section_2 .flex_column.av_one_half {
    padding: 35% 5px 30px 5px;
}
}

    The height was affected by the inner padding, this seems to correct in my tests.
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.