How To Remove A Banner On Squarespace

How to easily prepare the mobile view of your Squarespace banner image

One of the near common problems Squarespace users stumble upon is that text overlaid over an prototype looks weird in mobile view. It goes like this: you detect a good epitome and put information technology on the section background, you type in your headline and adjust its position – and you get a gorgeous first screen of your abode page (or any other page). You are content with the result until you make up one's mind to check the mobile view. Suddenly, you have three bug:

• epitome is cropped to fit the vertical screen;

• text overlays of import parts of the image;

• text is now unreadable.

Accept a await at the case below – we have a dainty mural-oriented picture here with plenty space for the headline and subheadline. In the mobile view it gets cut off and the text slides onto the adult female's face. No matter how we adjust the focal betoken of the image, information technology just won't piece of work.

Luckily, we can solve this problem with a little bit of CSS. Nosotros will give you the snippet of CSS code to ready the mobile view. This code will:

• divide the section in mobile view into two horizontal sections one stacked over the other

• show the original proportions of the prototype

• put your text over the solid colour groundwork

Here is your snippet of code. Y'all need to copy and paste information technology in the text window in the Pattern>Custom CSS.

// Flipping prototype and content on mobile  @media screen and (max-width: 1024px) {     .dark-bold.page-section {         display: flex !of import;         flex-direction: cavalcade !important;         groundwork: #EAC060;         min-height: auto !important;     }     .dark-bold.page-department .department-background {         position: relative !important;         width: 100% !important;     }     .dark-assuming.folio-department .department-background img {         width: 100% !of import;         height: 100% !important;         overflow: visible !of import;         margin-bottom: -10px;     }      .nighttime-bold.page-section .content-wrapper {   padding: 17px 17px 17px 17px !important;     text-marshal: center;     justify-content: middle;   } }

In lodge for information technology to work, yous will need to make a few changes to the lawmaking.

Get-go, allow'southward find out what the color theme of your section is. Click Edit on your page, then click on a pencil icon, so click on Colors. Our color theme, for case, is Lightest ane.

Squarespace has unlike names for the color themes in the CSS. Hither is the cheat sail for you in the moving-picture show with the list of all CSS classes respective with their color themes. For example, if we have Lightest ane, it has a .white class in the code; if it is Lightest ii it is .white-bold, etc.

Now that you have plant your existent color theme name, we need you to place it in iv unlike places of the code. Detect .dark-bold.folio-section, delete .dark-bold, put your colour theme name instead. In our case information technology looks like .white.page-department. You're doing great, now insert your color theme proper noun in three other places.

Practise not driblet whatever dots or hyphens forth the way, or the code won't work.

At present let's change the color of the background of this section. Find this line in the code: background: #EAC060; You demand to place the hex code of the color you need here. Hex code is the colour lawmaking after the hashtag. You can find the hex code of the color with an eyedropper tool in about any graphic editor – Figma, Canva, Adobe Photoshop. Or you tin can use other online tools.

The important affair is to make the heading contrast the background. If your text is dark, use a calorie-free background, if your text is calorie-free, use a dark background. In the instance, we utilize caramel brown text on the light cream background.

P.South.: The sections and color palette we use in examples to this tutorial are from our Indie Studio template, bank check it out here.

If you desire to learn more Squarespace design tricks, get our Squarespace Mastery class for only $67. With this form, you won't demand to get around digging the web for separate online tutorials.

The workshop is jam-packed with design goodness. Within, you'll find the following topics:

• What size should I design for? Responsive layouts and industry standards

• Typography 101: How fonts can elevate your pattern & wait professional person

• How to employ layout grids to directly the attention of your website visitors

• How to create a mood board and plan your website visuals

• Squarespace wireframe for Figma: reusable layouts to programme your website design

• Starting time implementing your website right abroad: Use our videos to recreate layouts

• Design secrets & tricks for Squarespace: Design a gorgeous website without code

• Larn how Squarespace blocks bear and adapt to pattern mobile-friendly layouts

• How to grow as a designer and how to look for creative inspiration

Are y'all in? Information technology'south only $67 - get in! I'll see you in Squarespace Mastery! As always, the workshop is bundled with all template purchases in our shop.

Relieve this for later Pinterest:

Source: https://www.applet.studio/blog/fix-banner-image-squarespace

Share this post