Site URL: https://www.thecreativebloc.co.uk/
Hi There!
I have added some css code to change my gallery captions, however they are not responsive and are very strange when viewing on mobile or at different sizes.
Can you help at all? I have used a lot of css in my website but don't really understand it enough to fix this.
This is the code i have in there relating to these captions etc. I may have doubled up on this but have lost track of what bit were important!
Thank you so much,
Capella
// Gallery Caption Text //
.gallery-section .gallery-caption p {
text-align: center;
font-size: 50px;
font-weight: 0;
color: #FDFCF8;
text-transform: normal;
line-height: 1.2em;
font-family: SpaceGrotesk;
}
.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(25,25,25,1); /* 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 */
}
.gallery-caption-content {
font-size: 1.5rem !important; /* caption font size */
color: #FDFCF8; /*caption font color */
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}
.sqs-block.image-block {
padding: 0;
}
.image-caption-wrapper {
opacity: 0;
text-align: center !important;
top: 0 !important;
position: relative;
pointer-events: none !important;
}
&:hover,
&:focus {
opacity: 1;
}
.image-caption {
left: 50%;
position: absolute;
top: 50%;
width: 100%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.image-caption p {
font-size: 18px !important;
font-weight: semibold !important;
color: #EEF281 !important;
text-transform: uppercase;
line-height: 120% !important;
letter-spacing: 2px !important;
opacity: 1 !important;
}
.sqs-block.sqs-block-editable:not(.sqs-block-editing) .sqs-dd-invalid-handle {
cursor: default;
pointer-events: all !important;
}
.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .intrinsic .image-caption-wrapper .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper {
background: #191919;
opacity: 1;
}
/* Image Captions on Hover*/
.image-caption-wrapper {
min-height: 100%;
display: flex;
align-items: center; /*vertically centered */
justify-content: center; /*text align center*/
background: rgba(25, 25, 25, 1) !important; /* Background Overlay*/
}
.image-caption-wrapper p {
color: red !important; /* font color of caption */
}