Mobile/website tweaks

Yunabuna

Haven't been able to figure these out. Any help is appreciated!

- Any way to get rid of the social widgets and footer completely, just for the mobile version?
- Can I change the header background to an opaque white instead of transparent? Also, just for mobile.
- On PC, can the gap between my footer and the bottom edge of the browser be eliminated?

Thank you!

http://chloemorenaphotography.com

Hikin' Mike

I was offline until this morning. Looks like you've removed your social icons and footer all together.

Yunabuna

Yes, I decided it would be easier to remove them.

I'm still struggling to figure out how to remove the extra header space below my logo though (mobile version). Any input is appreciated! Thanks!

The Mechanic

@Yunabuna Hey there here is some code that should address this for you on the smaller mobile devices:

/*** Mobile Header Modifications *** Smugocity **********/
@media screen and (max-width: 736px) {
.sm-page-layout-region-header {
height: 80px;
padding: 10px;
}
}
/******************** www.smugocity.com ********************/

You can wrap most css in a media size and control specific items at a given size. So this would solve your first question as well by replacing the header changes above with the css you used to remove the social icons/footer from everywhere.

Give it a spin,
The Mechanic

Hikin' Mike

@Yunabuna said:
Yes, I decided it would be easier to remove them.

I'm still struggling to figure out how to remove the extra header space below my logo though (mobile version). Any input is appreciated! Thanks!

You have an extra } in your custom CSS. Remove that here:

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

and then add this:

/* Removes padding on navigation in mobile */
@media screen and (max-width: 736px) {

  .sm-page-widget.sm-page-widget-nav .sm-page-widget-content {padding: 0 !important;}

}

Also you sure you want that margin-top: -20px;? It's cropping your logo on the top.

.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;
    margin-top: -20px;
    }

The Mechanic

To clear up any confusion this is a screenshot of what my above code should output with the media screen.

Here is a link to the default format for @ media options https://w3schools.com/cssref/css3_pr_mediaquery.asp

Yunabuna

Thank you! I was able to learn a lot from your responses. Appreciate it!