Website Not Showing Up Correctly Via Smartphone

AnastasiaMcManus

Hey all!

I am having trouble figuring out the CSS code for customizing the way my website looks when I view it on a smartphone.

These are the things I'd like help adjusting:
On the homepage, I'd like to be able to make the thumbnails in the gallery show up smaller and I'd like to have my navigation bar appear horizontal like the way it does on my actual site.
On the about page, I'd like to know how to make it look the same as it does on my actual site. Right now, it's displaying the text I have on the left side directly on top of the vertical separator with the text on the right side underneath.

Also something kind of weird happens when I look my website on a smartphone. When I enter www.anastasiamcmanus.com, the mobile site doesn't show up at all. It shows up the same way a desktop site would. Only when I enter www.anastasiamcmanus.smugmug.com, does the mobile site show up. Kind of strange, so if anyone can enlighten me on that, I would totally appreciate it!

Hopefully someone can help me figure it out!
Thanks!
Anastasia

denisegoldberg

AnastasiaMcManus wrote: »

These are the things I'd like help adjusting:
On the homepage, I'd like to be able to make the thumbnails in the gallery show up smaller and I'd like to have my navigation bar appear horizontal like the way it does on my actual site.
On the about page, I'd like to know how to make it look the same as it does on my actual site. Right now, it's displaying the text I have on the left side directly on top of the vertical separator with the text on the right side underneath.

Also something kind of weird happens when I look my website on a smartphone. When I enter www.anastasiamcmanus.com, the mobile site doesn't show up at all. It shows up the same way a desktop site would. Only when I enter www.anastasiamcmanus.smugmug.com, does the mobile site show up. Kind of strange, so if anyone can enlighten me on that, I would totally appreciate it!

Your site looks the same on my phone using both URLs. In both cases your menu is missing.

I don't think the About page would work on a phone with side-by-side text blocks. There just isn't enough real estate.

To target CSS to just a specific screen-size, start with the CSS on this page - http://www.aaronmphotography.com/Customizations/Sitewide/Screen-Width-Customizations.

--- Denise

AnastasiaMcManus

denisegoldberg wrote: »

Your site looks the same on my phone using both URLs. In both cases your menu is missing.

I don't think the About page would work on a phone with side-by-side text blocks. There just isn't enough real estate.

To target CSS to just a specific screen-size, start with the CSS on this page - http://www.aaronmphotography.com/Customizations/Sitewide/Screen-Width-Customizations.

--- Denise

*Original response - July 25th, 2015: Yeah, the menu is now missing because I have been playing with the html/css code to figure it out. It's missing because I'm trying to figure out how to display one nav bar on the desktop version and a different one for the mobile version. So far, haven't gotten it to work.

Regardless of whether it will work side by side or not, I'd just like to know how to be able to change it at all. I'd like to know what I do to override the current mobile layout so I have control of how it shows up.


I've already seen that website with the screen width customizations and it's just not working for me. I don't know what I'm doing wrong, but it won't work.


*Edit -July 26th, 2015: I figured it out! I need to use the html/css content blocks to re-create each part I'd like to be able to change/adjust for smartphone viewing. So far, I have been able to do it for my nav bar and for my logo header. I'm also going to do that for the gallery sizing issue and about page layout issue.