Move Text overlapping Image (Mobile Only)

Site URL: https://www.couragestyle.ca

I want to shift down two words "Courage Style" down on the mobile version of my Homepage as it currently overlaps with an image and is illegible. I know it'll need custom CSS but I am not a coder but am unsure the correct piece of code to use.  I have attached what it looks like on mobile and on Desktop and the Homepage code.

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#block-yui_3_17_2_6_1518136115139_5043 figcaption {
    margin-top: 1px;
}
}

On 1/23/2021 at 1:40 PM, tuanphan said:

@media screen and (max-width:640px) { div#block-yui_3_17_2_6_1518136115139_5043 figcaption { margin-top: 1px; } }

hi @tuanphan I used this code and changing the #block-yoi number it worked but just in one card but when i try to copy and do the same with the other cards nothing happened. can you help.

iliafrancis.com/home

@creedon maybe you can help me with this 😄  no sure why the code above only worked once in one block I changed the block id but nothing

@jennypetit

Do you want to target all the figcaption elements on that page?

13 hours ago, creedon said:

@jennypetit

Do you want to target all the figcaption elements on that page?

just the three collage image cards overlapping the title in mobil 

@jennypetit

Replace the previous CSS for this effect with the following.

@media screen and ( max-width : 640px) {

  #collection-604a28c16d672d3db22e065b .sqs-block-image .design-layout-collage.sqs-narrow-width .image-card-wrapper {
  
    margin-top : 1px;
    
    }
  }

Let us know how it goes.