Help with CSS mobile view please

heidiannemorris

Hello, Can anyone help me please, with my sites mobile view CSS.
my website https://www.heidiannemorris.com

I've "had a go" at my own edits, using some CSS code from Mike on here (thank you Mike) regarding the hamburger menu and some help from the smugmug heros, but I can't get it to look quite right.

I would like to move the hamburger menu up to the top left of my name, also move the text "My unique Art....." up to underneath my name. Finally I would like to make the semi transparent box smaller so that more of my image is visible.

The image named "Screenshot" with the coloured arrows is what I would like to move and to where - UP. The other image is also an indicator of how I would like the hamburger menu positioned and the text under my name.

Apologies if I have not created this post correctly, I'm not really sure how to use this forum.

I don't really fully understand CSS yet. I've been trying to learn using W3Schools site https://www.w3schools.com/css/

Many things have been added to my "Entire site" CSS using a content block, over the last few years, that probably don't need to be in there any longer. I can understand certain things in the code and what they relate to when they have their own titles above the code but the other coding is a mystery to me. I don't want to delete the wrong thing.

I'm also aware that there is a CSS code in my site "theme". I've no idea how the different CSS in the different places on my site affect the whole thing.

Here is the CSS in my "entire site" content block, I feel like it is a mess.

/*Making the mobile MENU label larger*/
.sm-page-widget-nav-mobile-header .sm-h5 {
font-size: 24px;
}

/* Increase Menu Text Size and Spacing */
.sm-user-ui .sm-page-layout-region-header .sm-page-widget-nav a{
font-size: 100px;
margin: auto 50px;
}

/* Make the sidebar reach the bottom of the page */
.sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-left {
bottom: -50px !important;
}

.sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header {
background-color: rgb(255,255,255);opacity:0.6; !important;
}


@media screen and (max-width: 736px){
.sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-left {
background-color: rgb(255,255,255);opacity:0.6; !important;
}
}
@media screen and (max-width: 736px){
.sm-page-widget-5256509 .sm-page-widget-content{
margin-right: 0px !important;
margin-left: 0px !important;
}
.sm-user-ui .sm-page-widget-separator hr{
display: none !important;
}
}
/**
* Hamburger Menu for Mobile Devices
* Centers Logo, Menu to the Left
****************************************************************/
.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-left,
.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-right,
.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-center {
text-align: center;
}

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand a.sm-h5 {
visibility: hidden;
}

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand a.sm-h5:before {
font-family: 'SmugMug Icon Font Regular';
font-size: 48px;
width: 48px;
line-height: 24px;
content: '\E039 ';
display: block;
visibility: visible;
}

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile,
.sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header {
background: none;
}

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand {
position: absolute;
top: -90px;/* adjust for your logo */
left: 10px;
z-index: 1;
}

.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-img,
.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-img-retina {
float: none;
}

.sm-user-ui .sm-page-widget-logo-text-container {
margin: 10px 0;
}

-------------------------------------------------------------------------------------

and this is the CSS in my site "theme" advanced content

/* ===Making SmugMug Standard Contact form white - tutorial from https://portal.photom.me=== */

/* Background mask - color change */
.sm-user-ui .yui3-widget-mask,
.sm-user-ui .sm-overlay-container .yui3-widget-mask {
background-color: #f7f7f7;
}

/* Changing the title color */
.sm-user-ui .sm-panel.sm-panel-contact h1 {
color: #000;
}

/* Changing contact form background color */
.sm-user-ui .sm-panel-contact .sm-procontact-overlay {
background-color: #fff;
}

.sm-user-ui .sm-panel-contact .sm-panel-content {
background-color: #ffffff;
}

/* Changing form fields */
.sm-user-ui .sm-panel-contact .sm-form-field-text-input,
.sm-user-ui .sm-panel-contact .sm-form-field-textarea {
color: #2b2b2b;
background-color: #ffffff;
border-color: #34363a;
}

.sm-user-ui .sm-panel-contact .sm-form-field:focus,
.sm-user-ui .sm-panel-contact .sm-form-field-textarea:focus {
background-color: #eaeaea;
border-color: #3c3e43;
}

/* Modifying buttons */
.sm-user-ui .sm-panel-contact .sm-button-skin-default,
.sm-user-ui .sm-panel-contact .sm-button-skin-submit {
color: #1b1b1b;
border-color: #34363a;
background-color: #ffffff;
}

.sm-user-ui .sm-panel-contact .sm-button-skin-default:hover,
.sm-user-ui .sm-panel-contact .sm-button-skin-submit:hover {
color: #3a3a3a;
border-color: #34363a;
background-color: #eaeaea;
}

/* Make the sidebar reach the bottom of the page */
.sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-left {
bottom: -50px !important;}
/* Increase Menu Text Size and Spacing */
.sm-user-ui .sm-page-layout-region-header .sm-page-widget-nav a{
font-size: 50px;
margin: auto 50px;
}

/* Increase Menu Text Size and Spacing */
.sm-user-ui .sm-page-layout-region-header .sm-page-widget-nav a{
font-size: 50px;
margin: auto 50px;
}



Thank you in advance. Kind regards Heidi

Hikin' Mike

First you need to remove the margin/padding from all 3 widgets (logo, text and menu) by adding this to your custom CSS:

@media screen and (max-width: 736px) {

  .sm-page-widget.sm-page-widget-6867720 .sm-page-widget-content,
  .sm-page-widget.sm-page-widget-27203962 .sm-page-widget-content,
  .sm-page-widget.sm-page-widget-5256509 .sm-page-widget-content {
    padding:0 !important; 
    margin:0 !important;
  }

}

Now you may like where your hamburger icon is now, but if you want it more "centered", you need to edit this line: top: -90px;/* adjust for your logo */. Try -80px.

heidiannemorris

Brilliant :) made some progress. Thank you very much for your help Mike, I managed to get the menu bar (thanks to your help) up in the top right corner just like I wanted.

Are you able to help me with moving the text "my unique art..." up the screen - I'd like to place it a little more closely to being under my name, so it sits just under the menu bar too.

The last bit I'd like to fix is the size of the opacity box, I'd like to shrink it so it then sits under my text please.

The image attached is of my site on mobile following the hamburger menu adjustment.

Kind regards Heidi

Hikin' Mike

You didn't copy the code correctly.

Hikin' Mike

You copied this, which is not correct: remove the margin/padding from all 3 widgets (logo,text and menu)@media screen and (max-width: 736px){}

You need to copy this in the box:

@media screen and (max-width: 736px) {

  .sm-page-widget.sm-page-widget-6867720 .sm-page-widget-content,
  .sm-page-widget.sm-page-widget-27203962 .sm-page-widget-content,
  .sm-page-widget.sm-page-widget-5256509 .sm-page-widget-content {
    padding:0 !important; 
    margin:0 !important;
  }

}

Once you've done that, you need to re-adjust the hamburger like I mentioned earlier.

heidiannemorris

Hi Mike, thank you for your quick and helpful reply.

I did follow your initial instructions and copied the code exactly as you first suggested.

I put it at the bottom of the rest of the code already in the CSS block that applies to my "entire site" - was this where I went wrong, I wonder? My apologies if this was the case.

Should the code have gone under my theme, advanced CSS custom box? I have included a screenshot of my "entire site" code to explain what I mean and also all of the code in that box is listed below...below that is the code in my Theme, advanced custom CSS.


/*Making the mobile MENU label larger*/
.sm-page-widget-nav-mobile-header .sm-h5 {
font-size: 24px;
}

/* Increase Menu Text Size and Spacing */
.sm-user-ui .sm-page-layout-region-header .sm-page-widget-nav a{
font-size: 100px;
margin: auto 50px;
}

/* Make the sidebar reach the bottom of the page */
.sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-left {
bottom: -50px !important;
}

.sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header {
background-color: rgb(255,255,255);opacity:0.4; !important;
}


@media screen and (max-width: 736px){
.sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-left {
background-color: rgb(255,255,255);opacity:0.4; !important;
}
}
@media screen and (max-width: 736px){
.sm-page-widget-5256509 .sm-page-widget-content{
margin-right: 0px !important;
margin-left: 0px !important;
}
.sm-user-ui .sm-page-widget-separator hr{
display: none !important;
}
}
/**
* Hamburger Menu for Mobile Devices
* Centers Logo, Menu to the Left
****************************************************************/
.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-left,
.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-right,
.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-align-center {
text-align: center;
}

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand a.sm-h5 {
visibility: hidden;
}

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand a.sm-h5:before {
font-family: 'SmugMug Icon Font Regular';
font-size: 48px;
width: 48px;
line-height: 24px;
content: '\E039 ';
display: block;
visibility: visible;
}

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile,
.sm-user-ui .sm-page-widget-nav-mobile .sm-page-widget-nav-mobile-header {
background: none;
}

.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-menu-expand {
position: absolute;
top: -120px;/* adjust for your logo */
left: 10px;
z-index: 1;
}

.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-img,
.sm-user-ui .sm-page-widget-logo .sm-page-widget-logo-img-retina {
float: none;
}

.sm-user-ui .sm-page-widget-logo-text-container {
margin: 10px 0;
}

remove the margin/padding from all 3 widgets (logo, text and menu)
@media screen and (max-width: 736px) {

.sm-page-widget.sm-page-widget-6867720 .sm-page-widget-content,
.sm-page-widget.sm-page-widget-27203962 .sm-page-widget-content,
.sm-page-widget.sm-page-widget-5256509 .sm-page-widget-content {
padding:0 !important;
margin:0 !important;
}

}

----------------------------------------------------------------------------------------------------------------------------------------------------


this is everything in my theme, advanced "custom CSS"



/* ===Making SmugMug Standard Contact form white - tutorial from https://portal.photom.me=== */

/* Background mask - color change */
.sm-user-ui .yui3-widget-mask,
.sm-user-ui .sm-overlay-container .yui3-widget-mask {
background-color: #f7f7f7;
}

/* Changing the title color */
.sm-user-ui .sm-panel.sm-panel-contact h1 {
color: #000;
}

/* Changing contact form background color */
.sm-user-ui .sm-panel-contact .sm-procontact-overlay {
background-color: #fff;
}

.sm-user-ui .sm-panel-contact .sm-panel-content {
background-color: #ffffff;
}

/* Changing form fields */
.sm-user-ui .sm-panel-contact .sm-form-field-text-input,
.sm-user-ui .sm-panel-contact .sm-form-field-textarea {
color: #2b2b2b;
background-color: #ffffff;
border-color: #34363a;
}

.sm-user-ui .sm-panel-contact .sm-form-field:focus,
.sm-user-ui .sm-panel-contact .sm-form-field-textarea:focus {
background-color: #eaeaea;
border-color: #3c3e43;
}

/* Modifying buttons */
.sm-user-ui .sm-panel-contact .sm-button-skin-default,
.sm-user-ui .sm-panel-contact .sm-button-skin-submit {
color: #1b1b1b;
border-color: #34363a;
background-color: #ffffff;
}

.sm-user-ui .sm-panel-contact .sm-button-skin-default:hover,
.sm-user-ui .sm-panel-contact .sm-button-skin-submit:hover {
color: #3a3a3a;
border-color: #34363a;
background-color: #eaeaea;
}

/* Make the sidebar reach the bottom of the page */
.sm-user-ui .sm-page-content > .sm-page-layout > .sm-page-layout-region > .sm-page-layout-region-left {
bottom: -50px !important;}
/* Increase Menu Text Size and Spacing */
.sm-user-ui .sm-page-layout-region-header .sm-page-widget-nav a{
font-size: 50px;
margin: auto 50px;
}

/* Increase Menu Text Size and Spacing */
.sm-user-ui .sm-page-layout-region-header .sm-page-widget-nav a{
font-size: 50px;
margin: auto 50px;#


Many thanks for your patience.

Kind regards Heidi

Hikin' Mike

What you did was copied and pasted the WHOLE reply to my first comment. You included non-CSS stuff (remove the margin/padding from all 3 widgets (logo, text and menu)) that now defeats the purpose.

So again, please remove this line on your code:
remove the margin/padding from all 3 widgets (logo, text and menu)

heidiannemorris

Hi Mike, thank you :)

I know what I did now, I understand - I thought I could include that text (remove the margin/padding from all 3 widgets (logo, text and menu) as a note to myself in the future to remind me what the code below it was about. I didn't realise what effect that had. Apologies.

I've removed it now and adjusted the hamburger menu. The top part of my site now looks just right, many thanks.

The changes have caused a gap to appear in the opaque overlay at the bottom of the screen on mobile.

Could you kindly advise how I make the opacity fit the screen right to the bottom (prior to the menu being expanded) on all mobile devices please?

Thank you Mike,

Kind regards Heidi

Hikin' Mike

@heidiannemorris said:
Hi Mike, thank you

I know what I did now, I understand - I thought I could include that text (remove the margin/padding from all 3 widgets (logo, text and menu) as a note to myself in the future to remind me what the code below it was about. I didn't realise what effect that had. Apologies.

If you want to include those notes, you just need to wrap those with these: /* */. So as an example: /* A Note Here */.

The changes have caused a gap to appear in the opaque overlay at the bottom of the screen on mobile.

Could you kindly advise how I make the opacity fit the screen right to the bottom (prior to the menu being expanded) on all mobile devices please?

If you're talking about the "gap" under the last menu entry (Lots more links), that's how it's supposed to work. If that isn't what you're talking about, then I don't understand your question.

heidiannemorris

Thank you Mike, yes that is the "gap". I'm guessing that has to be there for the "powered by smugmug" text to show up.

Thank you for the information on how to format with the /* */ noted 👍

and most of all thank you for all your time and help ♥ 🥃

I'm very grateful to you.

Kind regards Heidi

Hikin' Mike

@heidiannemorris said:
Thank you Mike, yes that is the "gap". I'm guessing that has to be there for the "powered by smugmug" text to show up.

No. That's how it's designed. I actually don't own a mobile device, so I can't show you a screen shot, but I'm guessing you have a small mobile?

I'm very grateful to you.

You're quite welcome!

heidiannemorris

Got it, thank you. Yes I have a 5 inch Google pixel. I've been previewing what it might look like along the way using Google chrome and right clicking, choosing "inspect" from the menu, that also shows me what it will look like on other devices.

All my best Heidi