Margin customization

scotthunter

Hi,

On my gallery pages I am trying to set a small left/right margin for header and body text and no left/right margin for image thumbnails. Currently, my gallery pages are set to show the opposite of this e.g. www.scotthunterphotography.com/Dartmoor

Thanks

Hikin' Mike

I see margins on both, but maybe I don't understand your question (as usual)

If you want to remove left/right margins on the thumbnails, add this.

.sm-user-ui .sm-tiles-row-organic.sm-tiles-spacing-4 .sm-tile-wrapper {
    margin: 0 0 4px 0;
    }

scotthunter

Hi Mike

I added this code but it doesn't do anything.

The margins are perfect on the homepage but not on the gallery pages.

Hikin' Mike

@scotthunter said:
Hi Mike

I added this code but it doesn't do anything.

The margins are perfect on the homepage but not on the gallery pages.

I'm confused, again. The code I provided does removes the left/right margins on the galleries. That's what you wanted, right. Looking at that page now, you changed the bottom margin from 4px to 0 now.

scotthunter

@Hikin' Mike said:

@scotthunter said:
Hi Mike

I added this code but it doesn't do anything.

The margins are perfect on the homepage but not on the gallery pages.

I'm confused, again. The code I provided does removes the left/right margins on the galleries. That's what you wanted, right. Looking at that page now, you changed the bottom margin from 4px to 0 now.

It doesn't work on iPhone. I tried adding the code on the gallery page and site theme CSS but it doesn't do anything. Maybe something else is overriding it?

Hikin' Mike

You didn't specify it was for mobile devices, so because I don't own a mobile, I use my desktop. Looking at it using quicktools, I can see what you're talking about now. Fixing may be tough as you have some conflicting code and plain old wrong code. You need to remove this from your Theme's Custom CSS (it's wrong and duplicate):

.sm-user-ui .sm-tiles-row-organic.sm-tiles-spacing-4 .sm-tile-wrapper {
    margin: -4 -4 4px 0;
    }

.sm-gallery-cover-title {
display: none;
}

    /* Hide the Gallery Title & gallery description */
.sm-gallery-cover-title {
display: none !important;
}

Add this to your Theme's Custom CSS:

@media screen and ( max-width: 736px ) {

    .sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region-header .sm-page-widget .sm-page-widget-content {
        margin: 0 !important;
        padding: 0 !important;
    }

}

    /* Hide the Gallery Title & gallery description */
.sm-gallery-cover-title {
    display: none !important;
    }

Next, looks like you have a CSS block on your Galleries. There is some conflicting/wrong CSS as well. Find this:

@media screen and (max-width: 736px) {
    .sm-user-ui .sm-page-widget .sm-page-widget-content {
        margin: 0!important;
        padding: 0!important
    }
    .sm-user-ui .sm-slideshow {
        margin: 0 auto
    }
    .sm-user-ui .sm-tiles-row-organic.sm-tiles-spacing-4 .sm-tile-wrapper {
        margin: 0
    }
    @media screen and (max-width: 736px) {
        .sm-user-ui .sm-page-widget .sm-page-widget-content {
            margin: 0!important;
            padding: 0!important
        }
        .sm-gallery-cover-title {
            display: none!important
        }
    }
}

.sm-page-widget-17048112 .sm-page-widget-content {
    margin-top: 0px;
    margin-bottom: 7px;
    margin-left: 0px;
}

.sm-page-widget-17048113 .sm-page-widget-content {
    margin-top: 35px;
    margin-right: 0px;
    margin-bottom: 0px;
}

Remove that and use this (for now).

@media screen and (max-width: 736px) {
    .sm-user-ui .sm-page-widget .sm-page-widget-content {
        margin: 0 !important;
        padding: 0 !important;
    }
    .sm-user-ui .sm-slideshow {
        margin: 0 auto;
    }
    .sm-user-ui .sm-tiles-row-organic.sm-tiles-spacing-4 .sm-tile-wrapper {
        margin: 0;
    }
}

.sm-page-widget-17048112 .sm-page-widget-content {
    margin-top: 0px;
    margin-bottom: 7px;
    margin-left: 0px;
}

.sm-page-widget-17048113 .sm-page-widget-content {
    margin-top: 35px;
    margin-right: 0px;
    margin-bottom: 0px;
}

That isn't going to fix that, but it will allow me to look into this without the old code.

scotthunter

Ok - I think I have made those changes, although I couldn't find this code:

.sm-page-widget-17048112 .sm-page-widget-content {
margin-top: 0px;
margin-bottom: 7px;
margin-left: 0px;
}

.sm-page-widget-17048113 .sm-page-widget-content {
margin-top: 35px;
margin-right: 0px;
margin-bottom: 0px;
}

scotthunter

In addition to removing the gallery thumbnail left/right margins I also want to add a small left/right margin for the title and body text above.

Hikin' Mike

@scotthunter said:
Ok - I think I have made those changes, although I couldn't find this code:

.sm-page-widget-17048112 .sm-page-widget-content {
margin-top: 0px;
margin-bottom: 7px;
margin-left: 0px;
}

.sm-page-widget-17048113 .sm-page-widget-content {
margin-top: 35px;
margin-right: 0px;
margin-bottom: 0px;
}

Didn't realize (or forgot) that code is automatically added when you change the margins on your widgets. This is all you should have:

@media screen and (max-width: 736px) {
    .sm-user-ui .sm-page-widget .sm-page-widget-content {
        padding: 0 !important;
    }
    .sm-user-ui .sm-slideshow {
        margin: 0 auto;
    }
}

li.sm-tile-wrapper.sm-tile-photo {
    border: 1px solid grey !important;
    margin: 2px !important;
}

Also, make sure you REMOVE this. It needs a px for all but 0 for it to work. Regardless, you don't need it.

.sm-user-ui .sm-tiles-row-organic.sm-tiles-spacing-4 .sm-tile-wrapper {
    margin: -4 -4 4px 0;
}

That should give you the left/right margins on your Gallery Titles/Descriptions.

Go into the Customizer and click on 'All Galleries > Layout'. Change the side margins to '0'. That should take care of it.

scotthunter

That’s fixed the margins for header text and body text blocks but I want the gallery thumbnails to be edge to edge with the mobile phone screen. Also the homepage thumbnails (gallery thumbnails and featured images) now have side margins - these need to be removed so that they are borderless like it was before.

Thanks

Hikin' Mike

@scotthunter said:
That’s fixed the margins for header text and body text blocks but I want the gallery thumbnails to be edge to edge with the mobile phone screen. Also the homepage thumbnails (gallery thumbnails and featured images) now have side margins - these need to be removed so that they are borderless like it was before.

Thanks

Sorry, I don't remember what it used to be. You want the text to have a left/right margin and no left/right margin on images on mobile devices, right. This is for the HOME PAGE ONLY. Add this to your theme's custom CSS:

@media screen and (max-width: 736px) {

    .sm-page-widget-17471927,
    .sm-page-widget-17471932 {
        margin: auto 12px;
        }

    .sm-page-home .sm-page-widget .sm-page-widget-content {
        margin: 0!important;
        padding: 0!important
    }
}

For the galleries. Not a clue. Removing the margins in the thumbnails just moves them to the left with a big margin to the right.

Hikin' Mike

I went back and looked at one of the galleries using quirktools (http://quirktools.com/screenfly/#u=http://www.scotthunterphotography.com/Dartmoor&w=414&h=736&a=37&s=1). When I added this to your CSS:

@media screen and (max-width: 736px) {

    .sm-user-ui .sm-gallery {
        margin: 0 !important;
        }

}       

It removed the margins, left-justified and a 24px margin to the right...like I mentioned in a previous reply. When I rotated the screen from 414x736 to 736x414, it worked. I rotated back and it worked. So try adding that to your CSS and see what happens.

scotthunter

Yes! You are great.

Hikin' Mike

Glad it worked! Not having a real mobile device is tough. Seems like the quicktool isn't 100% accurate.