Image Block not Displaying text-on-hover properly in Mobile

Site URL: https://www.hellaloveshow.com/

Hi all, I've scrapped together solutions for the entire site except for the landing page, where the image that is just above the bottom does not seem to display text correctly on mobile no matter what I try. Currently, in order to modify its appearance on desktop, I have added the following code:

/* Image Captions on Hover*/
.image-caption-wrapper {
  min-height: 100%;
  display: flex;
  align-items: center; /*vertically centered */
  justify-content: center; /*text align center*/
  padding-right: 250px !important;
  padding-left: 250px !important;
  background: rgba(0, 0, 0, 0.7) !important; /* Background Overlay*/
  transition: .4s !important;
}

.image-caption-wrapper p {
  color: white !important; /* font color of caption */
 
}
 

While it looks great on desktop, it is warped and does not display correctly on mobile. Any help regarding what CSS to add or take out, would be greatly appreciated!

You can change it to this to make it run on desktop only

@media screen and (min-width:768px) {
/* Image Captions on Hover*/
.image-caption-wrapper {
  min-height: 100%;
  display: flex;
  align-items: center; /*vertically centered */
  justify-content: center; /*text align center*/
  padding-right: 250px !important;
  padding-left: 250px !important;
  background: rgba(0, 0, 0, 0.7) !important; /* Background Overlay*/
  transition: .4s !important;
}

.image-caption-wrapper p {
  color: white !important; /* font color of caption */
}
}

One last question: The page titled "THE TEAM" features photos and bios, and it looks fine with the resolution that I have on my desktop and phone, but if the page width is changed at all, the text is cut off or becomes warped. Can you help me with the CSS that would change the text dynamically?

Here is the current CSS:

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.7); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}

@media only screen and (max-width:800px) { .gallery-caption-content {
font-size: .6rem !important;
  display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
  padding-top: 25px !important;
padding-right: 25px !important;
  padding-left: 25px !important;
  padding-bottom: 25px !important;/* caption font size */
  }}

.gallery-caption-content {
font-size: .8rem; /* caption font size */
color: white; /*caption font color */
padding-left: 50px;
padding-right: 50px;
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}

On 2/22/2022 at 8:40 AM, NujraSingh said:

One last question: The page titled "THE TEAM" features photos and bios, and it looks fine with the resolution that I have on my desktop and phone, but if the page width is changed at all, the text is cut off or becomes warped. Can you help me with the CSS that would change the text dynamically?

 

Here is the current CSS:

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.7); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}

@media only screen and (max-width:800px) { .gallery-caption-content {
font-size: .6rem !important;
  display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
  padding-top: 25px !important;
padding-right: 25px !important;
  padding-left: 25px !important;
  padding-bottom: 25px !important;/* caption font size */
  }}

.gallery-caption-content {
font-size: .8rem; /* caption font size */
color: white; /*caption font color */
padding-left: 50px;
padding-right: 50px;
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}

The text is too long, you can consider hide text on some specific devices, or reduce number of items/row...

Which screen size do you see problem? We can tweak code on these sizes.