Pel

My fonts switch when i save. The font I am wanting to use is ernestine pro which is an available font (not coded)

please can you help?

@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!

@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

you're amazing, thank you so much!

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 */
}