NujraSingh

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; }

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!