Bscott Posted January 21, 2021 Share Posted January 21, 2021 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. Link to comment
tuanphan Posted January 23, 2021 Share Posted January 23, 2021 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; } } 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
jennypetit Posted March 16, 2021 Share Posted March 16, 2021 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 Link to comment
jennypetit Posted March 17, 2021 Share Posted March 17, 2021 @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 Link to comment
creedon Posted March 17, 2021 Share Posted March 17, 2021 @jennypetit Do you want to target all the figcaption elements on that page? Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
jennypetit Posted March 18, 2021 Share Posted March 18, 2021 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 Link to comment
creedon Posted March 18, 2021 Share Posted March 18, 2021 @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. tuanphan 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! 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