Margin customization

scotthunterscotthunter Registered Users Posts: 45 Big grins

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

Comments

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    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;
        }
    
  • scotthunterscotthunter Registered Users Posts: 45 Big grins

    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @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.

  • scotthunterscotthunter Registered Users Posts: 45 Big grins

    @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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    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.

  • scotthunterscotthunter Registered Users Posts: 45 Big grins

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

  • scotthunterscotthunter Registered Users Posts: 45 Big grins

    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited April 20, 2018

    @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.

  • scotthunterscotthunter Registered Users Posts: 45 Big grins

    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    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.

  • scotthunterscotthunter Registered Users Posts: 45 Big grins

    Yes! You are great.

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

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

Sign In or Register to comment.