Issue with my Smugmug mobile site

DayDreamerPhotos · June 22, 2016

Hey Gang,

I was advised by one of the Smugmug Heros to come see if any of you could help.

I am having a problem with my site when viewed on a mobile. The images I have used as link buttons are not resizing and looking huge. I was wondering if any of you knew what I could do or how I could make it so that the mobile site looks nicer and a bit more like the main website. My website is www.daydreamerphotos.com and this is what the hero said:

Large buttons – because you are using images as your bottom navigation this is a normal behaviour that they fill the screen on mobile devices. You may try using a custom CSS code to resize them on mobile devices – for this I recommend that you post your question on our ADVANCED CUSTOMIZATION forum:

leftquark · June 23, 2016

The following CSS will shrink your buttons down to 50% of their normal size when on mobile. You can tweak the 50% to be whatever size you'd like. This only changes the 3 buttons on the bottom but you can adapt the code to work for your other buttons.

Go into the Customizer (Customize > Content and Design) and make sure you're on "Homepage". On the "Content Tab" you'll want to find HTML / CSS and then add a "CSS" content block to the bottom of your page. Paste in the code here:

/* FOR MOBILE DEVICES ONLY */
@media only screen and (max-width: 670px) {

	/* Shrink the size of the "Contact Me", "Testimonials" and "Your Images" button */
	/* Also, make sure they're centered by setting the left/right margin to auto */
	.sm-page-widget-15071755, .sm-page-widget-15071754, .sm-page-widget-15071753 {
	    width: 50%;
	    margin-left: auto;
	    margin-right: auto;
	}
}

Issue with my Smugmug mobile site

Comments