Flatiron Margins

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

How big were these margins? Looking at your site the white space on either side is not much larger than a border and not unattractive at all. 

Hi there,

Thanks for your reply!

The margins were zero so the images filled the screen fully from side to side which is one of the things that attracted me to the template in the outset.

Any idea on how to get it back to where it was?

Thank you so much.

Nancy

There is a site width adjustment in site styles but this might do the trick as well in custom css:

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

Hello,

That did not seem to work sadly,

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

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

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/

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%;
}
}

Let's try this, if it doesn' do what you need best to remove it, but view incognito, not from config to verify, or let me know when it is posted and I will look. 

.homepage section#container {
    max-width: 100%;
}

Hi there,

That doesn't seem to have worked either.

www.nancygoold.com

Checking from incognito also.

Would it be wise to delete all my custom css and reset the template to defaults and start from there?

Thanks again,

Nancy

Not yet. Lets give the coders here, and some are in a very different time zone a chance to view your site. This can be remedied I am sure. 

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