My Site on a mobile device

Johnwd · October 12, 2014

HI

I have got my site http://www.jdphoto.biz where I am happy with the way it look.

But when I try to view it on a mobile it looks naff, and ideas who i can make the headings and menus look better on a mobile device ?

Thanks in advance John

PS have included screen shoot from my Samsung

denisegoldberg · October 12, 2014

There is information on leftquark's page Change Features for Mobile or Tablet Browsers that shows how to target CSS to apply only to mobile devices.

Once you decide how you would like your site to look on a mobile device you will need to add CSS to target the desired look on a mobile device.

Post back with specific questions if you need help with the CSS.

--- Denise

Johnwd · October 12, 2014

denisegoldberg wrote: »

There is information on leftquark's page Change Features for Mobile or Tablet Browsers that shows how to target CSS to apply only to mobile devices.

Once you decide how you would like your site to look on a mobile device you will need to add CSS to target the desired look on a mobile device.

Post back with specific questions if you need help with the CSS.

--- Denise

Hi Denise,

Thanks for the info, If I could simple edit the headers and Menu I would be happy.

Are the any good recurses on here that would be of help as CSS is not something I understand that well.

Regards John

denisegoldberg · October 12, 2014

Johnwd wrote: »

If I could simple edit the headers and Menu I would be happy.

if you want the full menu to show you can set it not to collapse.

Customize...
Customize site
entire site
click the wrench on your menu
Scroll down through the options and set Collapse for Mobile to Off.

I suspect you may not like your standard menu on a mobile device though; not enough space.

You might also want to check the look of your site on other devices. The collapsed menu shows on tablets as well.

To look at your site on devices you don't have access to take a look at http://quirktools.com/screenfly.

--- Denise

Johnwd · October 13, 2014

Johnwd wrote: »

Hi Denise,

Thanks for the info, If I could simple edit the headers and Menu I would be happy.

Are the any good recurses on here that would be of help as CSS is not something I understand that well.

Regards John

Hi Denise,

If I could find away on smart devices to get it to auto remove phone number when view on a mobile phone I would be happy

Johnwd · October 13, 2014

Johnwd wrote: »

Hi Denise,

If I could find away on smart devices to get it to auto remove phone number when view on a mobile phone I would be happy

Hi Denise,

Just wanted to say thank you for your assistance, I moved all the details in a profile on the screen which means that Smugmug and make the mobile transition smother as the are in one container

A second thank you is required as in the past you gave someone else instructions on how to adjust font size in the profile container

John

leftquark · October 13, 2014

Johnwd wrote: »

If I could find away on smart devices to get it to auto remove phone number when view on a mobile phone I would be happy

Hi John,
The link to my Customizations that Denise provided is a good start and here's some code based on it that should do the trick for you:

/* Hide the phone numbers from mobile browsers */
@media only screen and (max-width: 740px) {
  .sm-page-widget-profile-biotext { display: none !important; }
}

-leftquark

denisegoldberg · October 13, 2014

leftquark wrote: »

-leftquark

Hey leftquark -
I just noticed your new signature - congrats!

You're already an awesome contributor here, I'm looking forward to having another voice in to the smug product team.

--- Denise

Johnwd · October 15, 2014

leftquark wrote: »
Hi John,
The link to my Customizations that Denise provided is a good start and here's some code based on it that should do the trick for you:
/* Hide the phone numbers from mobile browsers */
@media only screen and (max-width: 740px) {
  .sm-page-widget-profile-biotext { display: none !important; }
}
-leftquark

Hi Leftquark,

Many thanks for the code, when i am free next weekend I will have a play with it

I think the over all problem is that the items were not in CSS ID container, so the system struggle with it all. Made use for the profile container whick is work about 99% of what I desire.

If I could work out how to reduce the opacity of the bar from the MENU on a mobile device I would be happy with it 100%

Regards John

leftquark · October 15, 2014

Johnwd wrote: »

If I could work out how to reduce the opacity of the bar from the MENU on a mobile device I would be happy with it 100%

This code should do the trick. Change the percentage in the last field to tweak how opaque it is.

/* Make the "MENU" bar on mobile slightly transparent */
.sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header {
  background-color: rgba(36, 37, 40, [COLOR="Red"]0.7[/COLOR]) !important;
}

Johnwd · October 17, 2014

leftquark wrote: »
This code should do the trick. Change the percentage in the last field to tweak how opaque it is.
/* Make the "MENU" bar on mobile slightly transparent */
.sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header {
  background-color: rgba(36, 37, 40, [COLOR=Red]0.7[/COLOR]) !important;
}

Many thanks for the heads up

Ok got to ask who did you learn this stuff, as I have been trying to use a wed-designer tool in Firefox to try and find the correct area to insert Font Size to enlarge the Menu font size a little but can see anything

John

leftquark · October 17, 2014

I use the built in developer tools in Chrome. Basically you just find the element on your site (like your phone #), right click on it and choose "Inspect Element". The code pops up and jumps right to the spot you selected. As you move your mouse over the code, the section of that code displays with a blue box on your website. I can use that to figure out where the section is. I change the CSS code to make it do what I want and then copy/paste that code into a CSS block. A good video is here: https://www.youtube.com/watch?v=cnWL2d9bGPk

Johnwd · October 18, 2014

leftquark wrote: »

I use the built in developer tools in Chrome. Basically you just find the element on your site (like your phone #), right click on it and choose "Inspect Element". The code pops up and jumps right to the spot you selected. As you move your mouse over the code, the section of that code displays with a blue box on your website. I can use that to figure out where the section is. I change the CSS code to make it do what I want and then copy/paste that code into a CSS block. A good video is here: https://www.youtube.com/watch?v=cnWL2d9bGPk

Hi Leftquark,

Thanks for the link to the video which i kind of follow, but have decided to stop where i am as I am getting lost and frustrated when looking at the coding for my site re mobile devices and their DIV id's Styles etc.

Thank you for you help much appreciated.

When I can afford I think I am best to pay to sit down with someone that can explain it front of me so that I know whats going on.

Regards John

My Site on a mobile device

Comments