Options

Homepage scaling

cactusplantcactusplant Registered Users Posts: 6 Big grins
edited May 8, 2016 in SmugMug Support
I'm having difficulties with my website on mobile devices. The homepage background doesn't seem to want to scale properly to smaller devices. Also I'm having difficulties with my footer not properly scaling to the screen res.

Would appreciate some help.

Many thanks.

Comments

  • Options
    Hikin' MikeHikin' Mike Registered Users Posts: 5,455 Major grins
    edited May 7, 2016
    A link to your site may help...
    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • Options
    cactusplantcactusplant Registered Users Posts: 6 Big grins
    edited May 7, 2016
    Hikin' Mike wrote: »
    A link to your site may help...

    Doh. My bad.

    http://www.elliotedwardsphotography.co.uk/
  • Options
    Lille UlvenLille Ulven Registered Users Posts: 567 Major grins
    edited May 8, 2016
    Hi cactusplant

    I have been playing around with this in Firefox for a little while...
    If I am right, than this code might help you out: 
    #sm-tile-image-yui_3_8_0_1_1462698557792_99 .sm-tiles-cover .sm-image {
	width: 100%;
	min-height: 0%;
}

    Not certain if you are going to need the #sm-tile-image-yui_3_8_0_1_1462698557792_99 or not, possibly not...

    Your current CSS code defines this area like this: 
    .sm-tiles-cover .sm-image {
	min-width: 100%;
	min-height: 100%;
}

    And in my opinion a minimum of 100% in height and width, will always cause a photo not being scaled but cut off on smaller devices.

    Good luck

    Lille Ulven
    https://www.lilleulven.smugmug.com - The Photos of my travels
  • Options
    cactusplantcactusplant Registered Users Posts: 6 Big grins
    edited May 8, 2016
    Lille Ulven wrote: »
    Hi cactusplant

    I have been playing around with this in Firefox for a little while...
    If I am right, than this code might help you out: 
    #sm-tile-image-yui_3_8_0_1_1462698557792_99 .sm-tiles-cover .sm-image {
	width: 100%;
	min-height: 0%;
}

    Not certain if you are going to need the #sm-tile-image-yui_3_8_0_1_1462698557792_99 or not, possibly not...

    Your current CSS code defines this area like this: 
    .sm-tiles-cover .sm-image {
	min-width: 100%;
	min-height: 100%;
}

    And in my opinion a minimum of 100% in height and width, will always cause a photo not being scaled but cut off on smaller devices.

    Good luck

    Lille Ulven


    Thanks for that.

    I've come to decide that I think I'd like to distinguish between mobile device and desktop or distinguish by resolution to display a separate picture. Is that possible/easy to do?

    Using my website on mobile devices is so horrid at the moment.
Sign In or Register to comment.