How to you can replicate the banner section you see on Erin McGinn's site within your Squarespace website

I had a question come up in an email from a new member, asking about how you can achieve a similar design as the sections within Erin’s about page.

There are two options we can achieve this type of design. I’ve studied the way the designer of this website has set this up and Option 1 seems to be more fitting and requires a little less code.

But in the past, I did find another way of reaching this type of design by doing it with option #2 which I will also share below.


Option #1

This option does not require any code when it comes to designing the actual page for desktop and is similar to the post I just shared with you here, but I’m going one step further to show you how you can make this design work on mobile devices.

 
 

CSS to make this banner mobile friendly:

Note: make sure you change the ID# to one that is on your website. You can do this by Right clicking on that specific page section, then clicking on INSPECT. Find the line that show the Section ID# and also highlights your entire section in blue.

@media only screen and (max-width: 640px) {
  #example-page {
    background: #d2ad54;
  }
}

@media only screen and (max-width: 790px) {
    #example-page {
    background: #d2ad54;
  }
  
}

Code breakdown:

@media only screen and (max-width: 640px) { }

This line of code:@media only screen and (max-width: 640px)” targets all devices with a maximum width of 640 pixels. This is the average mobile device screen width.

We then target this style by inserting all of the styles we want between the brakets: “ { }

The same goes for the devices with a maximum width of 790 pixels.

#example-page is the name of your page within the index. This is found to be the same as the page URL found within the page settings.

background: #d2ad54; } means we are making the the background color of the page a specific color (hex#). The } means we are closing out the styles for this specific page.

The final } means we are closing out the styles for this specific mobile view.


Option #2

This option requires a little extra code, but I think this could look really good on any mobile devices. This option uses the image card block instead of the banner image.

The video below is how we’ve put this option using the image card block.

 
#example-page-2 .Index-page-content  {
  padding: 0px !important;
}

#block-yui_3_17_2_1_1543594098994_4817 {
  padding: 0px;
}

@media only screen and (max-width: 640px) {

  #block-yui_3_17_2_1_1543594098994_4817 .image-title,  #block-yui_3_17_2_1_1543594098994_4817 .image-button {
text-align: center !important;
}
  
}


code breakdown:

The only part you’ll need to replace is your page ID. You will need to find your page ID within your Index page in order to replace this code.

#example-page-2 is the page URL. Make sure you are adding the # symbol in front of the page URL to target that specific page.

.Index-page-content will target all of the content within that page.

padding: 0px !important; means we are leaving no space around the image block. adding the !important; means we are forcing it to happen.

} means we are closing all of the styles for that specific class/code.

#block-yui_3_17_2_1_1543594098994_4817 { Means we are targeting all of the styles for that specific block. In this case, we are targeting this specific image block only. This block ID is different for every single block.

padding: 0px; Means we are leaving no space around this image block specifically.

@media only screen and (max-width: 640px) { means we are setting styles for phone views.

#block-yui_3_17_2_1_1543594098994_4817 .image-title means we are targeting the title of that specific image block. Again, your block ID should be different from mine, but the same as the one entered above.

#block-yui_3_17_2_1_1543594098994_4817 .image-button means we are targeting the button on that specific image block. Again, your block ID should be different from mine, but the same as the one entered above.

text-align: center !important; } Means we are centering the button and making sure we are forcing the style with the help of the !important; tag

} means we are closing the styles for the phone views.