Pel Posted January 3, 2022 Share Posted January 3, 2022 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 */ } Link to comment
tuanphan Posted January 4, 2022 Share Posted January 4, 2022 Add to Design > Custom CSS to resize text on mobile /* Homepage mobile text */ @media screen and (max-width:767px) { body.homepage figure.gallery-grid-item p { font-size: 14px !important; line-height: 20px !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Pel Posted January 6, 2022 Author Share Posted January 6, 2022 you're amazing, thank you so much! Link to comment
Pel Posted January 6, 2022 Author Share Posted January 6, 2022 @tuanphan that was incredibly helpful and works beautifully for mobile. I am still having problems that when the website is sized down before it hots the mobile breakpoint the text is still too big for the wrapper. Can you suggest anyhthing to help with this? thank you Link to comment
tuanphan Posted January 8, 2022 Share Posted January 8, 2022 On 1/6/2022 at 7:24 PM, Pel said: @tuanphan that was incredibly helpful and works beautifully for mobile. I am still having problems that when the website is sized down before it hots the mobile breakpoint the text is still too big for the wrapper. Can you suggest anyhthing to help with this? thank you we can resize text on these breakpoints. Which screen size do you see problem? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Pel Posted January 11, 2022 Author Share Posted January 11, 2022 @tuanphan Hi thanks so much😬, Sorry to be ignorant but i actually don' know how to workout the sizes when it starts playing up- i would say it's around the size of a laptop screen or half of my large imac desktop 😬 sorry for not knowing better! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment