Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

aravsanj

Member
  • Posts

    66
  • Joined

  • Last visited

2 Followers

Personal Information

Recent Profile Visitors

230 profile views
  1. Well the image is removed again so I cannot test the code Try this: #block-yui_3_17_2_1_1624184081359_7319 .image-block-wrapper { padding-bottom:0px !important; position:absolute !important; bottom:-2vh; }
  2. Try this: #block-yui_3_17_2_1_1624184081359_7319 .image-block-wrapper { padding-bottom:0px !important; position:absolute !important; bottom:-100px; }
  3. Can you add that image back as shown in the picture? Then it will be easier to figure out the problem.
  4. Okay I got the problem. Squarespace already has some inbuilt styling for H1 and H4 which interfering with our code and forcing it to break. Let's try resetting all the squarespace default styles and try to redo it. <div class="heads"> <h1 class="title">Turning Raw Materials Into Story Telling</h1> <h4 class="tm">TM</h4> </div> <style> h4 { all: initial; * { all: unset; } } h1 { all: initial; * { all: unset; } } .title { float:left; } .tm { float:left; /* random styling */ color:red; font-size:bold; } .heads { font-size:2vw; } .heads h1 { font-size:50px; } .heads h4 { font-size:20px; } </style>
  5. @ChicagoAwakeningChurch Maybe that you forgot to use ; at the end. /*LEADERSHIP PAGE FONT */ #collection-608a19a8d367fc1b9b3b68bc h3 { font-family: 'nanumgothic', sans-serif !important; font-weight: 400 !important; font-size: 16px !important; line-height: 1.8 !important;} /*OUR MISSION PAGE FONT */ #collection-608a2435b153c010dc0b395b h3 { font-family: 'nanumgothic', sans-serif !important; font-weight: 400 !important; font-size: 15px !important; line-height: 1 !important;}
  6. Yes. If that doesn't work, you can try the below code as code block on the home page: <style> @media only screen and (max-width: 799px) { /* center aligning heading and button */ #block-34b0912c095dbf42afc0 .sqs-block-content h1 { display:block !important; margin-left:auto; margin-right:auto; text-align:center; } #block-yui_3_17_2_1_1622422433135_9712 .sqs-block-content a { display:block !important; margin-left:auto; margin-right:auto; } /* adjust height of intro section */ #intro { height:30vh; } } </style> It looks like this for me:
  7. Try this on custom CSS: @media only screen and (max-width: 799px) { /* center aligning heading and button */ #block-34b0912c095dbf42afc0 .sqs-block-content h1 { display:block !important; margin-left:auto; margin-right:auto; text-align:center; } #block-yui_3_17_2_1_1622422433135_9712 .sqs-block-content a { display:block !important; margin-left:auto; margin-right:auto; } /* adjust height of intro section */ #intro { height:30vh; } }
  8. This should adjust the font-size in accordance with the screen size. Try it. <div class="heads"> <h1 class="title">Turning Raw Materials Into Story Telling</h1> <h4 class="tm">TM</h4> </div> <style> .title { float:left; } .tm { float:left; /* random styling */ color:red; font-size:bold; } .heads { font-size:2vw; } </style>
  9. @Ufamizm I believe your ultimate intention is wanting to style both the H1 and H4 independently? Try this adding this to a code block: <h1 class="title">Turning Raw Materials Into Story Telling</h1> <h4 class="tm">TM</h4> <style> .title { float:left; } .tm { float:left; /* random styling */ color:red; font-size:bold; } </style> I got this:
  10. Great job! but a small correction. Try this: @media screen and (max-width:767px) { .header-mobile-logo { text-align: center; margin-left: 50px; } }
  11. Try adding this code in code block right above the form. <button onclick="showApp()" class="Apply">Apply</button> <script> function showApp() { var s = document.getElementById("block-yui_3_17_2_1_1623761017131_23708");; if (s.style.display === "none") { s.style.display = "block"; } else { s.style.display = "none"; } } </script> <style> .Apply { display:block !important; margin-left:auto; margin-right:auto; background-color: black; border: none; border-radius: 7px; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; } </style>
  12. Helping will be way easier if you could share the link? The below code should help center your logo be centered in the screen. Need your website link to see if it is possible to center your logo in between the left side of the screen and burger icon. @media screen and (min-width:100px) and (max-width: 799px){ .header-title-logo { display:block !important; margin-left:auto; margin-right:auto; } }
  13. I think you place the code at the wrong place? The code is working but you should either place it in custom CSS or in the page https://rocksforlife.com/search Attached an image to show how it looks:
  14. It seems to me that you have used display: none to hide the business info. But I managed to force it to show using display: block. The text is not written inside any html element so you should try targeting the parent div class like this: .Footer-business-info-item { font:15px Courier !important; } Hope that helps.
×
×
  • Create New...