Jump to content

Header Alignment

Recommended Posts

Site URL: https://plaza-square.squarespace.com/

Hi there,

I'm trying to center align this markdown box that I have in the header of my pages. I added this code to CSS for the box around the words:

.boxBorder {
     border: 2px solid #deebf7;
     padding: 10px;
     outline: #deebf7 solid 2px;
     outline-offset: 5px;
   }

 

And this code in the markdown box:

<h1>
<div class="boxBorder">
<div style="text-align:center"
>
FULL-SERVICE LAUNDRY
</div> 

but I the box and words inside are not centered in this header image and I'm not sure why. It's slightly lower. I am also trying to get the box to be closer to the words on the left and right, rather than take up that whole empty space. Thanks for anyones help!

Also, the password to get into the site is "Peanuts" without the quotation marks. I also attached a picture if you for some reason can't get into the site.

Screenshot1.png

Link to comment
  • Replies 6
  • Views 854
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

On 8/6/2021 at 1:27 AM, Auzday said:

I figured out how to get the markdown centered. I just put this:

<center> <all other styling>
  
</all other styling> </center>

before and after the rest. but I still need help with the other question.

Hi. What is access password?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 8/9/2021 at 12:32 AM, Auzday said:

I just need to figure out how to make the width of the box closer to the words. And make the mobile width smaller too

Try this CSS

.boxBorder {
    padding: 5px !important;
}
@media screen and (max-width:767px) {
.boxBorder div {
    font-size: 1.5rem;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • 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.