http://kingofcrown.com/test/fireplace-mantel.html
The two columns I'm referring to hold the vertical to horizontal thumbnails
the space/margin is getting added between them on the iPhone
but also goes away in landscape, weird huh?
In firefox when you diminish to around 330px wide there is no space
That makes it hard to find with my coding apps
Anyone have an idea where it is coming from?
Do you see that space on Chrome or if you have a mac on Safari... could be a browser thing?
Might come from Flex maybe or something I missed at the breakpoints.
Below is the inspector CSS maybe I'm just not seeing it.
The left to top column
body > .row > [class*='small-'] {
padding-right: .6rem;
padding-left: .6rem;
}
body > .row > [class*='small-'].smpic-col-topleft {
min-height: auto;
border-right: .0625rem solid #f8b003;
border-left: .0625rem solid #f8b003;
background-color: #141414;
text-align: center;
}
@media screen and (min-width: 40rem) {
body > .row > [class*='small-'] {
padding-right: .9rem;
padding-left: .9rem;
}
}
@media screen and (min-width: 64rem) {
body > .row > [class*='small-'].smpic-col-topleft {
border-right-style: none;
border-left-width: 0;
}
}
The right to bottom columnpadding-right: .6rem;
padding-left: .6rem;
}
body > .row > [class*='small-'].smpic-col-topleft {
min-height: auto;
border-right: .0625rem solid #f8b003;
border-left: .0625rem solid #f8b003;
background-color: #141414;
text-align: center;
}
@media screen and (min-width: 40rem) {
body > .row > [class*='small-'] {
padding-right: .9rem;
padding-left: .9rem;
}
}
@media screen and (min-width: 64rem) {
body > .row > [class*='small-'].smpic-col-topleft {
border-right-style: none;
border-left-width: 0;
}
}
body > .row > [class*='small-'] {
padding-right: .6rem;
padding-left: .6rem;
}
body > .row > [class*='small-'].smpic-col-botright {
padding-bottom: .6rem;
border-right: .0625rem solid #f8b003;
border-left: .0625rem solid #f8b003;
background-color: #141414;
}
@media screen and (min-width: 40rem) {
body > .row > [class*='small-'] {
padding-right: .9rem;
padding-left: .9rem;
}
}
@media screen and (min-width: 64rem) {
body > .row > [class*='small-'].smpic-col-botright {
padding-bottom: 0;
border-left-style: none;
}
}
padding-right: .6rem;
padding-left: .6rem;
}
body > .row > [class*='small-'].smpic-col-botright {
padding-bottom: .6rem;
border-right: .0625rem solid #f8b003;
border-left: .0625rem solid #f8b003;
background-color: #141414;
}
@media screen and (min-width: 40rem) {
body > .row > [class*='small-'] {
padding-right: .9rem;
padding-left: .9rem;
}
}
@media screen and (min-width: 64rem) {
body > .row > [class*='small-'].smpic-col-botright {
padding-bottom: 0;
border-left-style: none;
}
}
