Jump to content

IgnitePerth

Circle Member
 View Profile  See their activity

  • Posts

    85

  • Joined

  • Last visited

 Content Type 

Everything posted by IgnitePerth

  1. IgnitePerth
    Hi Heather, Can you share your site link with us?
  2. IgnitePerth
    Not well. Text and images need to be able to resize freely for many different screen sizes. Most of that code already exists. Try recreating it with actual Squarespace blocks and they should do this for you.
  3. IgnitePerth
    You will need to share a site password with us so that we can view your site. (This password just lets people see your dev site, not access your Squarespace account)
  4. IgnitePerth
    Sorry about your experience. Can you provide a link to a website that has the Ssquarespace layout/functionality you expected? Maybe we can offer solutions using 7.1?
  5. IgnitePerth
    As an addition to the above, if for some reason you ABSOLUTELY cannot share a site link, play with the header-title margin-left value. a value of around 50% should place the logo somewhere near the middle, but again without seeing your site we cannot see what other elements you have in the header to know. .header-title { margin-left: 50%; }
  6. IgnitePerth
    A simple solution without seeing your site or it's code is to set the logo to be on the left with menu right and then change the flex box to allow the logo to rest up against your menu. Try this to see what you get: .header-title-nav-wrapper{ flex-grow: 1; flex-shrink: 0; margin-left:auto; } .header-layout-nav-right .header-nav { margin-left: unset !important; } .header-nav { flex-grow: unset !important; } .header-title { margin-left: auto; } The only way to get a logo that sits exactly in the middle with your nav items wrapping to the right is to change a lot of the code/styles - which as has been mentioned above, would require a shared link to your site.
  7. IgnitePerth
    Trixy one! intrinsic is the class you need - to solve the sizing add img: Calling the img tag inside intrinsic solves your problem on the home page, but not Our Services. .intrinsic img{ box-shadow: 0px 20px 20px 0px rgba(15,35,98,0.75); } Tuanphan's code is the right selector for Our Services
  8. IgnitePerth
    In order to change the drop down transparency, try the below - just change the colour code's transparency to your desired amount (I used the colour code from your old website): .header .header-layout-nav-right .header-nav .header-nav-item--folder .header-nav-folder-content { background-color: #000000a1 !important; } I am not aware of an "active-page" class for navigation items, perhaps @tuanphan or @paul2009 can help you with that one.
  9. IgnitePerth
    you have a rule overiding font-size #block-c52eda86fd78a01e48e6 .image-title-wrapper * { font-size: 23px !important; }
  10. IgnitePerth
    try the below in Design > Custom CSS .product-price::before { content: "from"; } if you wish to style the word "from" further you can do so inside that same rule. eg: .product-price::before { content: "from"; font-size: .9rem; color: #A3826C; }
  11. IgnitePerth
    Did you manually make the below declaration? It looks like you have added custom fonts h1, h2, h3, h5 { font-family: 'Bluescript'; } the simplest way would be to add !important after Blusecsript: h1, h2, h3, h5 { font-family: 'Bluescript' !important; } do you wish ALL h1, h2, h3, h5 headings across the site to be that font no matter what/where? If so !important will help you. If not it will be a matter of calling specific classes in each place you wish to make the changes.
  12. IgnitePerth
    Password is incorrect- can you update your post with correct one?
  13. IgnitePerth
    the simplest way would be to make 2 identical sections - one with video background and one with image background. Use media queries to hide the video section for mobile and hide the image section for anything else. so for your video section - hide on mobile (section ID is an example you will need to find yours): @media screen and (max-width:767px) { section[data-section-id="6100e140e8068a6d8db0fed2"]{ display:none; } } and to hide your image/mobile section for larger displays: @media screen and (min-width:768px) { section-ID-of-your-mobile-image-section{ display:none; } } EDIT: TRY THIS FIRST As soon as I hit submit I realised my error. Try the below, if it does not work, go back to the method above: (dont forget to replace the section-ID below with your ACTUAL section ID) @media screen and (max-width:767px) { section[data-section-id="6100e140e8068a6d8db0fed2"] .background-video{ display:none; } }
  14. IgnitePerth
    You would achieve both of these things with a section background. Add a new blank section at the top of your page. Click the pencil to edit that section. Click on Background - here you can set an image OR video as the section background. In the format tab, adjust to your liking. On top of this background you can add any blocks you like - text, buttons, headings etc.
  15. IgnitePerth
    Hey Jnap o/ Your need to update your original post - I think you have miss-pasted your site password. Once we can see what we are working with, we may be able to help you. --Baz
  16. IgnitePerth
    .sqs-search-ui-button-wrapper.color-light .search-input { color: red; } Replace red with your desired colour, and place this in your Design > Custom CSS. Keep in mind that the above code will apply to your light section style. To make this kind of change to additional site styles look for the color-light equivalent. eg: it may be color-dark, or color-bright (it should be fairly easy to identify based on the section style you have chosen) If this is the only section style you are using, the above code should solve your problem.
  17. IgnitePerth
    You appear to resolved this?
  18. IgnitePerth
    try adding !important @media screen and (max-width:767px) { .section-background-canvas canvas { top: 50px !important; } }
  19. IgnitePerth
    It will inherit any style given to p. If you have any other paragraph styles (eg: i you have small paragraph, medium paragraph) you will need to add the class for that in your code as well.
  20. IgnitePerth
    This page was changed to book-now? It appears you have solved your problem.
  21. IgnitePerth
    this would depend on how you have displayed your gif. Can you share the code? a basic example would be to use an a tag for the link and place an img tag inside that with your gif. so an example of that would be (placed in a code block): <a href="https://forum.squarespace.com/profile/281193-igniteperth/"> <img src="https://media.giphy.com/media/2W7E1aS87BHsXEiwWq/giphy.gif"> </a> the "a href" is where the link goes the img source is the link to your gif
  22. IgnitePerth
    The only CSS selectors I know of would be for first letter or first line. There is no means to select first-word(2). The only way to achieve and maintain this for multiple pages would be with an html code block, where you could place the first 2 words inside a span and specify a class. That class could be changed in one location to update all instances it has been used. eg: <p><span class="p-first-two">Lorem ipsum</span> dolor sit amet, consectetur adipiscing elit. Illa tamen simplicia, vestra versuta. Ratio quidem vestra sic cogit. Respondeat totidem verbis. <p> then in CSS you could set the colour, size etc: .p-first-two{ color: gray; } Outside of this you would require javascript. The only one that comes to mind for this purpose is https://github.com/davatron5000/Lettering.js
  23. IgnitePerth
    It is best to avoid images with text and recreate them in squarespace using blocks. You can use image blocks with text over them that will automagically resize - this cannot be achieve if you are using images of text.
  24. IgnitePerth
    NP! Glad to help 🙂
  25. IgnitePerth
    You will need to share your site with a password for us to see it.
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources