Jump to content

brendandelany

Member
  • Posts

    10
  • Joined

  • Last visited

Posts posted by brendandelany

  1. Site URL: https://delanydesigns.com

    Password: 123456

    I’m trying to get the text and image in my mobile footer to go next to each other, but I can’t get it to work.

    I’ve placed the blocks next to each other and set the width of the text (and social media icons) blocks to 50vw and the width of the image block to 20vw. With the mobile footer side margins set to 10vw, the total for the margins and content is 90vw. That should mean that there’s enough space left over for the text and image to sit next to each other, but for some reason the image is bumped down below the text (both in the mobile preview on the desktop Squarespace editor and on my iPhone when I load my website in Safari).

    All the custom CSS that I’ve done for the footer is below. I know it’s a lot, but I decided to include all of it just in case.

    //Footer//
    footer.sections {
      section {
        min-height: unset !important;
      }
      section .content-wrapper {
        padding: 0 0 2rem 0 !important;
        margin: 0 7.5vw 0 7.5vw !important;
      }
      a {
        font-weight: 500 !important;
      }
    }
    
    section[data-section-id="620b2b4c0b17db5c830aba97"] {
      padding: 0 !important;
      margin: 0 !important;
    }
    
    	//Company Name Text Block//
    	#block-a313b4b5156e6ffd6767 {
          padding: 0 !important;
          margin: 0 !important;
    	}
    
    	#block-a313b4b5156e6ffd6767 h4 {
          font-size: 1.25rem !important;
          font-weight: 700 !important;
          text-transform: uppercase !important;
    	}
    
    	//Hidden Spacer Block//
    	#block-yui_3_17_2_1_1645223809885_8480 {
          display: none !important;
    	}
    
    	//Address and Contact Info. Text Block//		
    	#block-yui_3_17_2_1_1645223809885_12720 {
          padding: 0.625rem 0 0 0 !important;
          margin: 0 !important;
    	}
    
    	#block-yui_3_17_2_1_1645223809885_12720 p {
          font-size: 1rem !important;
          font-weight: 400 !important;
    	}
    
    	//Social Media Icons Block//
    	#block-yui_3_17_2_1_1644900073520_11304 {
          padding: 0.5rem 0 0 0 !important;
          margin: 0 !important;
    	}
    
    	.sqs-svg-icon--wrapper:hover .sqs-use--icon {
          fill: #941215 !important;
    	}
    
    	//Logo Image Block//
    	#block-yui_3_17_2_1_1645144314791_120592 {
          padding: 0 !important;
          margin: 0 !important;
          width: 6.5rem !important;
    	}
    
    	//Copyright Info. Text Block//
    	#block-620c1f758d973d6e37c14f48 {
          padding: 2rem 0 0 0 !important;
          margin: 0 !important;
    	}
    
    	#block-620c1f758d973d6e37c14f48 p {
          font-size: 0.875rem !important;
          font-weight: 400 !important;
    	}
    
    	//Hidden Spacer Block//
    	#block-yui_3_17_2_1_1645639093105_12783 {
          display: none !important;
    	}
    
    	//Squarespace Attribution Text Block//
    	#block-yui_3_17_2_1_1644961177595_50221 {
          padding: 0.1875rem 0 0 0 !important;
          margin: 0 !important;
    	}
    
    	#block-yui_3_17_2_1_1644961177595_50221 p {
          font-size: 0.75rem !important;
          font-weight: 400 !important;
    	}
    
    	#block-yui_3_17_2_1_1644961177595_50221 a {
          font-weight: 700 !important;
    	}
    
    //MOBILE STYLES//
    @media screen and (max-width:767px) {
      //Footer//
      	//Decrease Bottom Padding and Increase Side Margins//
      	footer.sections {
          section .content-wrapper {
            padding: 0 0 1.5rem 0 !important;
            margin: 0 10vw 0 10vw !important;
          }
      	}
      
      	//Company Name Text Block//
      		//Change Width//
      		#block-a313b4b5156e6ffd6767 {
              width: 50vw !important;
      		}
      
      		//Decrease Font Size//
    		#block-a313b4b5156e6ffd6767 h4 {
              font-size: 1.125rem !important;
      		}
      
      	//Address and Contact Info. Text Block//
      		//Decrease Top Padding and Change Width//		
    		#block-yui_3_17_2_1_1645223809885_12720 {
              padding: 0.5rem 0 0 0 !important;
              width: 50vw !important;
      		}
      
      		//Change Font Size//
    		#block-yui_3_17_2_1_1645223809885_12720 p {
              font-size: 0.875rem !important;
    		}
    
    	//Social Media Icons Block//
    		//Decrease Top Padding and Change Width//
      		#block-yui_3_17_2_1_1644900073520_11304 {
              padding: 0.375rem 0 0 0 !important;
              width: 50vw !important;
      		}
      	
      	//Logo Image Block//
    		//Change Width//
      		#block-yui_3_17_2_1_1645144314791_120592 {
              width: 20vw !important;
      		}
    
    	//Copyright Info. Text Block//
    		//Decrease Top Padding//
      		#block-620c1f758d973d6e37c14f48 {
              padding: 1.5rem 0 0 0 !important;
    		}
    
      		//Decrease Font Size//
    		#block-620c1f758d973d6e37c14f48 p {
        	  font-size: 0.75rem !important;
    		}
    
    	//Squarespace Attribution Text Block//
      		//Decrease Top Padding//
      		#block-yui_3_17_2_1_1644961177595_50221 {
              padding: 0.125rem 0 0 0 !important;
    		}
    
      		//Decrease Font Size//
    		#block-yui_3_17_2_1_1644961177595_50221 p {
    	      font-size: 0.625rem !important;
    		}
    }

    Can someone please help me figure out where I’ve made a mistake? Thank you!

    IMG_6807FCC55B71-1.jpeg

  2. @tuanphan That worked perfectly! Thanks. Can you also help me with a related issue I’m having? I have the font weight for my navigation links set to increase on hover. Here’s the code (I included everything related to links and the navigation bar in case it’s relevant):

    a {
      font-weight: 700 !important;
      text-decoration: none !important;
    }
    
    a:hover {
      color: #941215 !important;
    }
    
    .header-nav-item a {
      font-weight: 400 !important;
      font-size: 1.25rem !important;
      letter-spacing: -0.0125rem !important;
      text-transform: uppercase !important;
    }
    
    .header-nav-item a:hover {
      font-weight: 700 !important;
      letter-spacing: -0.0125rem !important;
    }
    
    .header-nav-item--active a {
      color: #941215 !important;
      font-weight: 700 !important;
      letter-spacing: -0.0125rem !important;
      text-decoration: none !important;
      background-image: none !important;
    }

    Because increasing the font weight increases the width of the text, when you hover over a link in the navigation, it causes all the links to shift. I want them to stay in the same place. I figure that increasing the size of whatever container each link is in will fix this, but I have no idea how to do that. Do you have any ideas?

  3. I think I figured it out! I’m pretty sure that you only see the Squarespace domain in links when you are viewing the site from your Squarespace account (when you access the site from your dashboard). If you access the site by typing the URL into the address bar of the browser, the links should have your custom domain. Compare the screenshot from the original post with the one below:

    Screen Shot 2022-02-15 at 5.04.37 PM.png

  4. 12 hours ago, paul2009 said:

    Unless I have misunderstood your question, you shouldn't need any code for this.

    Simply add four Text Blocks to the footer. You can then add your links to each of the blocks. They will be spaced equally and will 'collapse' when the site width is reduced, keeping them responsive. Here's a video

    Thanks! That’s helpful, and I think it helps me solve my issue pretty well.

    I just wish Squarespace’s layout editing tools included more advanced features like smart guides (basically what Illustrator and InDesign have).

  5. Site URL: https://delanydesigns.com

    Password: 123456

    Hi! I’m trying to figure out if there’s a way to change the URLs of pages within my site. I know how to change the slugs, but I’m specifically asking if I can change other parts of the URL – namely the domain. The reason I ask is because the URLs for the links in the navigation section contain the Squarespace domain, but I want them to have my custom domain. For example, instead of “Our Work” linking to https://delanydesigns.squarespace.com/our-work, I want it to link to https://delanydesigns.com/our-work. Is that possible?

    Screen Shot 2022-02-15 at 4.47.25 PM.png

  6. Site URL: https://delanydesigns.squarespace.com/

    Password: 123456

    Hi! I’m a little new to working with Squarespace, though I have taken a class on HTML and CSS.

    I’m trying to get the links in my footer to take up an equal amount of space horizontally, but I can’t figure it out. I remember learning that using percentages in CSS pertains to the container of whatever element you are adding style rules for, so for 4 links I’d think that “width: 25%;” should work. But, as you can see in the screenshot, I’m not at all getting what I want. Is there something that I’m missing, such as padding or margins or something taking up space and making those percentages not add up correctly?

    Can someone help, please? Thanks!

    (Also, in case it makes a difference, my site is currently not public because I’m just getting started on it.)

    CSS:

    Quote

    div#block-f870ea3fe206be690057 {
      width: 25% !important;
    }

    div#block-yui_3_17_2_1_1644887303584_13576 {
      width: 25% !important;
    }

    div#block-yui_3_17_2_1_1644887303584_16476 {
      width: 25% !important;
    }

    div#block-yui_3_17_2_1_1644887303584_17415 {
      width: 25% !important;
    }

     

    Screen Shot 2022-02-14 at 8.19.50 PM.png

×
×
  • Create New...

Squarespace Webinars

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

Hire a Designer

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