Jump to content

Flatiron Margins

Recommended Posts

Site URL: https://www.nancygoold.com/

Hello,

I was following some advice posted here on how to create whitespace padding around grid items in the Flatiron template which didn't really work.   As it didn't work I deleted the custom CSS but for some reason (even after deleting) white margins now remain on either side (left and right) of my site - these are horrible and I'd like to remove them.  

Have I broken the template?

Any help greatly appreciated and thanks in advance,

Nancy

 

Link to comment
  • Replies 10
  • Views 683
  • Created
  • Last Reply

Hello,

That did not seem to work sadly,

Also in Site Styles the only width settings I have available are:

 

Capture.JPG.273e15cdc09ca288c08be6523e8ed7c9.JPG

And only the Project Width seems to have any bearing (it just changes the size of the gallery items) but does not affect the overall margins of the page.

Again, thank you so much.

Nancy

 

Link to comment

There is no other code than that you removed? If you change the code I posted to 110 percent does it make a change?

I don't think your site is broken, and there are folks here, coders,  who can spot things and provide a fix I am sure. 

Here is something you might be interested in, the author of this site will be here later I am sure. 

https://beaverhero.com/flatiron-squarespace/

Link to comment

Hello,

I did not remove any other code no.  I have a few other bits and pieces of custom css in there which I have pasted below.

Changing your code to 110% or even 150% makes no difference.

Thanks again,

Nancy

 

li.index-collection.folder{
  display:none;
}

#navigator .siteTitle{
  max-width: 75%;
}

.site-titlelogo-position-left #navigator .siteTitle {
  padding: 21px 0 0 0;
}


#navigator header#topBar ul#nav{
  padding: 50px 0 10px 0;
  max-width: 25%;
}

#navigator .siteTitle{
  margin: 0 15px;
}

#navigator .siteTitle a:hover, #mobile-navigation ul a:hover {
  color:#ffabd4;
  border-color: #ffabd4;
}

#navigator .switcher{
  display: none;
}

section#container.index{
  margin: 101px 15px 0 15px;
}

#navigator header#topBar ul#nav{
float: right;
}

#navigator footer#bottomBar #footerBlock {
  width:100%;
}

@media only screen and (max-width: 640px){
  #mobile-navigation {
  background-color: black;
}
  .site-titlelogo-position-left #navigator .siteTitle {
  margin: 0 15px;
   padding-bottom: 18px;
}

#project .gallery {
    max-width: 150%;
}
}

 

Link to comment

Hello,

I have fixed the issue.

There was a piece of custom CSS in there which read:


section#container.index{
  margin: 101px 15px 0 15px;
}

And although I believe it was only meant to apply to the index (I actually can't remember what this piece of code was for) (it was inserted a long time ago) it seemed to start affecting the whole page when I put some other code in this morning.

Removing it has removed the margins on either side.

I'm still confused as to why this code come alive in a new way today .. 

Thanks for all your help.

Nancy

 

 

 

Link to comment

Archived

This topic is now archived and is closed to further replies.


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