CSS help to format logo and footer when viewing on mobile
desiredusername
Registered Users Posts: 14 Big grins
Hi,
I am looking for css help in formatting my home page when viewing on mobile devices.
I am viewing on a galaxy 6 edge and my logo runs across the head of the person displayed on my home page which doesn't look good and my social share buttons located in the footer are not appearing at the bottom on my mobile screen- rather about an inch above it. I posted a screenshot here:
http://www.stevengregoryphotography.com/Mobile-Screenshot/
I would like for my footer to display at the very bottom for all mobile devices and I would like my logo to appear at the bottom of my page just above the social icons. Optimally I would actually like to pull a logo in white font for mobile since that would show better vs the gray ( I guess I could also just replace my existing logo with a white font variant if I can't toggle between the two).
Any suggestions and advice welcome. I have read through the threads but haven't come across any CSS that approximates what I want to do for me to tweak and test.
Thank you!
I am looking for css help in formatting my home page when viewing on mobile devices.
I am viewing on a galaxy 6 edge and my logo runs across the head of the person displayed on my home page which doesn't look good and my social share buttons located in the footer are not appearing at the bottom on my mobile screen- rather about an inch above it. I posted a screenshot here:
http://www.stevengregoryphotography.com/Mobile-Screenshot/
I would like for my footer to display at the very bottom for all mobile devices and I would like my logo to appear at the bottom of my page just above the social icons. Optimally I would actually like to pull a logo in white font for mobile since that would show better vs the gray ( I guess I could also just replace my existing logo with a white font variant if I can't toggle between the two).
Any suggestions and advice welcome. I have read through the threads but haven't come across any CSS that approximates what I want to do for me to tweak and test.
Thank you!
steven
url: http://stevengregoryphotography.com
url: http://stevengregoryphotography.com
0
Comments
You may need to think your design.
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
I have been reading through Aaron Meyers offerings on customization (thank you, Aaron!) and have been able to suppress my logo from displaying when the screen is 1366 wide and less which is great, but I then want to have another image of my logo then appear at the bottom of the page on screens that are a max width of 1366.
My question is this:
When I use just the first bit of code affecting the logo, it works.
When I just just the second bit of code affecting the slideshow, it works.
But if I use them together, the logo works and the slideshow does not.
How can I have the logo suppress for screens that are 1366 and smaller and have the slideshow (or any other means of displaying another logo) appear for screens that are 1366 and smaller?
@media only screen and (max-width: 1366px) {
/* Hide the header from Mobile Phones */
.sm-page-widget-logo { display: none !important; }
@media only screen and (min-width: 1366px) {
/* Hide the header from Mobile Phones */
.sm-page-widget-slideshow { display: none !important; }
Thanks!
-Steven
url: http://stevengregoryphotography.com
You can see an example of multiple statements in one @media entry in the example section of the page http://www.aaronmphotography.com/Customizations/Sitewide/Screen-Width-Customizations.
--- Denise
Musings & ramblings at https://denisegoldberg.blogspot.com
Based on my limited knowledge of coding, I don't know how to combine my two goals into one statement.
If I wanted to suppress the displaying of both the logo and the slideshow at a specific min or max screen width, I think I understand how a single statement would work, but I do not know how to combine me wanting to suppress the logo when the screen is a specific width and smaller, and then suppress the slideshow when the screen is at a specific width and wider. Any suggestions or leads to learning how are welcome.
Thanks!
url: http://stevengregoryphotography.com
Hopefully someone else has the correct answer for you.
--- Denise
Musings & ramblings at https://denisegoldberg.blogspot.com