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

aravsanj

Member
  • Posts

    66
  • Joined

  • Last visited

Everything posted by aravsanj

  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.
  15. Did you meant to add a trademark to a H1 heading? You can create markdown block and then type the following: Trademark<sup>TM == Replace the word "Trademark" with your heading.
  16. The "URL.ttf/.otf" at the beginning looks like a typo. It is not loading in mobile probably because you have not provided all the formats. For example, you need .ttf font format to work in safari/ Android and iOS browsers. When I stimulated the mobile version of your website on desktop, it was fine. Try atleast finding the .ttf format and upload it.
  17. The height. The min-width property is there to keep the effect only on PC. 80vh means the images will assume 80% of screen height automatically.
  18. Are you using custom CSS? Then it will get applied to all the pages and <style> will give you syntax error because it is not necessary. The above code best works by using it as a code block in the said pages. If you wish to use it in custom CSS, try the following. For store: #collection-608b810fc721e771c865110c .header-mobile-logo a { content: url("https://static1.squarespace.com/static/608b7f525ae4750b8a333075/t/60c495135ddb7b783f824b06/1623495958198/Untitled+design.png"); } For info: #collection-60c349b68f342c1eed30bf08 .header-mobile-logo a { content: url("https://static1.squarespace.com/static/608b7f525ae4750b8a333075/t/60c494cdd5222928e4b032a4/1623495887775/Untitled+design+%281%29.png"); }
  19. @senecabryson Thanks for bringing this up again. I recently learned a better and easier way to do this and I hope it works. Try adding the below code to your custom CSS. .header--menu-open .header-display-mobile .header-title-logo a { background-image: url("https://static1.squarespace.com/static/5fda74d2609d110fc83247da/t/60c793c9b664f91202956aa7/1623692233222/drb+black.png"); } @tzercarnt I want to recall my earlier post. Try the below code on custom CSS: .header--menu-open .header-display-mobile .header-title-logo a { content: url("URL OF YOUR BLACK LOGO"); }
  20. You can just create a custom code block on that page and any CSS will only affect that page. Alternatively, you can use collection-ID to target only that page in custom CSS. #collection-608a2435b153c010dc0b395b is the collection ID of the our mission page. So something like this on custom CSS will only affect that page: #collection-608a2435b153c010dc0b395b H4, P { font: font-size: } You can use a chrome extension called squarespace collection/block identifier to find collection and block IDs
  21. You have only targeted desktop logo in your CSS. Target mobile logo as well. For store: <style> .header-mobile-logo a { content: url("https://static1.squarespace.com/static/608b7f525ae4750b8a333075/t/60c495135ddb7b783f824b06/1623495958198/Untitled+design.png"); } </style> For info: <style> .header-mobile-logo a { content: url("https://static1.squarespace.com/static/608b7f525ae4750b8a333075/t/60c494cdd5222928e4b032a4/1623495887775/Untitled+design+%281%29.png"); } </style>
  22. What you want is a fixed element, not a static one. It is done by using position:fixed attribute. Here is an example: <div id="element"> </div> <style> #element { height:100px; width:100px; background:red; position:fixed; } </style> Try pasting the above code in a code block and the element will be fixed at the top-left corner even when you scroll. You can use top, left, right, and bottom properties to fix the permanent position of the element.
  23. @ando_337 I believe what you want is: 1. A transparent colored box 2. Solid white colored text in it 3. A border that is fixed at certain distance away from the box so it will peek the image below. Try replacing the code with the one below: <div id="border"> <div id="box"> <div id="text"> <h3>Wenn der Blick in die Sterne Zuhause bedeutet... <h3> </div> </div> </div> <style> #box { background: rgba(0, 0, 0, 0.3); padding: 20px 40px; } #text h3 { color:white; } #border { border-color: black; border-width: 2px; border-style: solid; padding:5px; } </style> I hope I had all the right assumptions and the code is working.
  24. The div that contains the text has class "sqs-block-content" (try it). The block-ID div is probably not the right target. The code itself is working. But, you will be targeting a universal class that affects everyone. Alternatively, you can just do the whole thing in a custom code block. It should be something like this: <div id="text"> <p>Insert your text here<p> </div> <style> #text { background: #8C7B69; opacity: 0.7; padding: 50px 200px; </style>
×
×
  • Create New...