CSS help to format logo and footer when viewing on mobile

desiredusername · February 3, 2016

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!

Hikin' Mike · February 3, 2016

It isn't just mobile devices. I'm using a smaller monitor (1280 x 1024) and I see the logo is close to his head. You can see your site on different sizes here: http://quirktools.com/screenfly/#u=http%3A//stevengregoryphotography.com&w=1024&h=600&s=1

You may need to think your design.

desiredusername · February 8, 2016

Thank you for the link to quirktools- very useful!

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

denisegoldberg · February 8, 2016

desiredusername wrote: »

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

Have you tried combining the two statements into one @media only screen entry?

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

desiredusername · February 8, 2016

Hi,

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!

denisegoldberg · February 8, 2016

desiredusername wrote: »

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.

Ah, sorry, I missed that one statement was for a specific width and smaller and the other was for a specific width and wider - somehow my eyes read both as the same.

Hopefully someone else has the correct answer for you.

--- Denise

CSS help to format logo and footer when viewing on mobile

Comments