stawberryey

On 7/2/2020 at 11:13 AM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (min-width:641px) {
header#topBar {
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}
.siteTitle {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    padding-bottom: 0 !important;
    padding-top: 5px !important;
}
ul#nav {
    max-width: 100% !important;
    width: 100%;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
section#container {
    margin-top: 150px !important;
}
}

 

I tried this code but nothing changed 😞 mikagu.me/work/instalment-only-card

is it because I have other code that's 1) hiding the site logo from appearing  2) setting the box shadow?

Hi all! I need a little help on centering my navigation tabs in header. Tried all the solutions in this forum and none seems to work for me. Maybe it's because I've already modified the code to hide my site logo? 

My site is as follow: mikagu.me. I've also customized the header so it only appears when you click into the projects. 

Thanks in advance for your help 🙂

On 9/6/2021 at 12:26 PM, creedon said:

Add the following to Design > Custom CSS.

/*

  begin images blocks round some image corners
  
  Version       : 0.1d0
  
  SS Version    : 7.1
  
  Dependancies  : LESS
  
  Notes         : this is a snippet of code adapted from Site Wide Rounded Image
                  Corners < https://bit.ly/3tlUQ4x >, < https://bit.ly/3l0zqWV >
  
  By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  */
  
  @site-wide-image-radius : 25px;
  
  // for the following selectors each line ends with a comma except the last
  
  #block-yui_3_17_2_1_1630864230979_26348,
  #block-yui_3_17_2_1_1630864230979_33943
  
    {
    
      .intrinsic {
      
        .image-block-wrapper, // inline
        .image-inset // card, collage, overlap, poster, stack
        
          {
          
            border-radius : @site-wide-image-radius;
            z-index : 1;
            
            }
            
        .image-overlay {
        
          border-radius : @site-wide-image-radius;
          
          }
        }
        
      }
      
  // end round some images blocks

This is for a v7.1 site.

I have started you off with a couple of block ids. To find the others check out Heather Tovey's most excellent looking Squarespace ID Finder.

Let us know how it goes.

Perfect - this is so clear and worked like a charm. Thanks so much Creedon!

On 6/9/2020 at 10:41 AM, tuanphan said:

Remove this code

header#header {
    border-bottom: 1px solid #e5e5e5;
}

and add

.header-announcement-bar-wrapper {
    border-bottom: 1px solid #e5e5e5;
}

 

Hi @tuanphan this header code works perfectly for my footer as well - thanks so much!

 Quick question - is there any way I can decrease the width of the line to about 75% of the screen size(about the width of the grid above)? Here's the URL to my website: mikagu.me

Thanks so much!

15 hours ago, creedon said:

It is possible to target more specific elements of the page. Can you isolate phone mockups into page sections of their own? When I say isolate, not have any other non-mock up images that you don't want to get rounded corners in the same sections. Text and other elements is fine of course. Isolating the mockups in this way would allow for us to target CSS to those specific sections.

The other more tedious way would be to target specific image blocks.

Thanks so much for your reponse Creedon!

Hmm I tried adding new section but the padding on top and bottom is too wide that it looks disconnected with the rest of the article (https://www.mikagu.me/work/instalment-only-card). I am trying to round the corners of the two gifs in the "Designing for trust and confidence" section, mainly bc i thought rebuilding gifs would take much more time than coding it in squarespace. 

is there a way to target specific image blocks?

Hi all! 

I'm trying to figure out how to add padding in between my two images in the section of "Designing for trust and confidence". Here's the link: https://www.mikagu.me/work/instalment-only-card (scroll to about the middle of the page).

My goals are to:

1) Have the images in equal sizes

2) Have the padding in between images not too wide

What I've tried was:

a) Adjusted the height % & width %. However, it didn't work because it's leaving too much white space/padding on top and bottom. Below is the code I used(credit to @tuanphan in another post!):

Quote

div#block-yui_3_17_2_1_1630864230979_33943 img {
    display: block;    
    height: 90% !important;
    width: 90% !important; 
}

b) Added a code block but can't seemed to find how to reference an image in the code block. 

Any solution to a) or b) would be greatly appreciated! Thanks so much! 🙂

@creedon
Posting here as it's relevant to this post's question 🙂

I tried the code you wrote up there - it works like a charm!  However it turns all images into rounded corners. Is there anyway to turn just the pictures in specific sections into rounded corners on a specific page, but not others? E.g. on https://www.mikagu.me/work/instalment-only-card, I'd like to have round corners on only the phone mockups but not others. 

Really appreicate your help, creedon!!