Mobile site customization

tomlewisphotogprahy

Hi, I'm looking for a way to reduce the space between my social icons and the copyright at the bottom of my mobile site.

It displays just how i'd like on the desktop version but the mobile version looks off to me.

Is there a way to do this?

The image below shows what I mean

Thanks

Hikin' Mike

Add this to your CSS should take care of that:

/*
* Removes Padding on Social and Copyright in Mobile
************************************************************/
@media screen and (max-width: 736px) {

  .sm-user-ui .sm-page-widget.sm-page-widget-sociallinks .sm-page-widget-content,
  .sm-user-ui .sm-page-widget.sm-page-widget-29336163 .sm-page-widget-content {padding: 0 !important;}

}

tomlewisphotogprahy

Hi Mike,

I've had a play with this, it did do something when I put it in the correct place but it actually pushed the copyright down further rather than reducing the space.

Now I think i've deleted something because I can't get it to work at all, I tired to put it back but i'm stuck now. Could you take a look when you get a chance. Next time i'll take a photo of the code before I change it so I can at least put it back myself.

The code is in advanced settings of my theme, as you instructed me to do in the past

Thanks

Hikin' Mike

Yep, you removed two closing bracket and you also duplicated the last code:

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

  .sm-user-ui.sm-page-home .sm-page-layout-region-footer {
    position: fixed;
    bottom: 0;


/*
* Removes Padding on Social and Copyright in Mobile
************************************************************/
@media screen and (max-width: 736px) {

  .sm-user-ui .sm-page-widget.sm-page-widget-sociallinks .sm-page-widget-content,
  .sm-user-ui .sm-page-widget.sm-page-widget-29336163 .sm-page-widget-content {padding: 0 !important;}

    }  


     /*
* Removes Padding on Social and Copyright in Mobile
************************************************************/
@media screen and (max-width: 736px) {

  .sm-user-ui .sm-page-widget.sm-page-widget-sociallinks .sm-page-widget-content,
  .sm-user-ui .sm-page-widget.sm-page-widget-29336163 .sm-page-widget-content {padding: 0 !important;}
    }

SmugMug adds 12px top/bottom Padding on all widgets. So if you just want the extra padding removed between your social and copyright, then you'll need this instead. I also included the missing brackets:

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

  .sm-user-ui.sm-page-home .sm-page-layout-region-footer {
    position: fixed;
    bottom: 0;
  }

}  

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

  .sm-user-ui .sm-page-widget.sm-page-widget-sociallinks .sm-page-widget-content {padding-bottom: 0 !important;}

  .sm-user-ui .sm-page-widget.sm-page-widget-29336163 .sm-page-widget-content {padding-top: 0 !important;}

}

tomlewisphotogprahy

Great, it works perfectly. And of course you knew that but to me it's pretty amazing. I know how important those brackets are from when I tried to learn java (I failed miserably).

I think i'm going to have a crack at CSS when this sites finished, really appreciate what it does and how versatile it is.

Most of all there is actually an end product making it easier to understand what the code is actually doing, unlike java. Or at least I couldn't get my head around java anyway.

thanks again.

Edit: and a quick search shows me that I should start with HTML if I want to learn CSS, looks like il be starting there.

Hikin' Mike

I had a class on Java about 25 years ago. Still couldn't code Java/Javascript. I started teaching myself HTML/CSS years ago. As I say, I know just enough HTML/CSS to be dangerous!

tomlewisphotogprahy

Hi Mike,

I started learning HTML last night with an app called solo learn, really enjoying it.

I have a question about the mobile site, when I open the hamburger and click on my links they turn grey, and stay grey even after re loading the page. I'd like them to return to my accent colour after they have been clicked, as that's what used to happen.

this screenshot is taken in Microsoft Edge, I also tried: Pure Browser, Chrome, Firefox, Duck Duck Go and UC Turbo all the same.

any ideas?

See image below

Lille Ulven

You can do that by adding the following:
a.sm-accordion-item-label:visited{
color: #;
}

Of course, you would have to change the into the Hexadecimal value of your accent color, f.ex. 3d4f5f

Good luck

Lille Ulven / Wiebke

tomlewisphotogprahy

Ohh thanks Lille, I addressed my post to Mike because he's the only one I've dealt with on here before, nice to talk to someone new.

So I input the code into advanced settings within my main theme but it doesn't seem to do anything.

A thought I just had may be the cause of the problem.

I have an art page and I have a separate theme running on that page, blue instead of my main orange theme, maybe this isn't possible to do, hence giving problems with the mobile site?

In an ideal world I'd like the whole site, apart from the art page to run my main theme (orange) and my art page to run the blue theme.

I don't really know what i'm talking about but it may help someone who does.

As you can see from the pics, both pages have grey links.

I'm expecting you to tell me I put the code in the wrong place or something silly like that lol!

Thanks for your help

Hikin' Mike

@tomlewisphotogprahy said:
Ohh thanks Lille, I addressed my post to Mike because he's the only one I've dealt with on here before, nice to talk to someone new.

So I input the code into advanced settings within my main theme but it doesn't seem to do anything.

A thought I just had may be the cause of the problem.

What @Lille Ulven said is you also need to add the Hexcode for the color color: #;. Right now you have this in your code, so it won't work. Technically it won't work even if you add it (at least it didn't for me).

a.sm-accordion-item-label:visited{
color: #;
}

So remove that from above and add this. This will make your gray menu text orange and it will also change it to blue on your Art page.

/**
* Changes Menu Text and Hamburger Icon Colors
***************************************************/
.sm-user-ui .sm-accordion >.sm-accordion-item > .sm-accordion-item-label,
.sm-user-ui .sm-accordion >.sm-accordion-item > .sm-accordion-item-label:visited,
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-mobile-items-visible .sm-page-widget-nav-menu-expand > a,
.sm-user-ui .sm-page-widget-nav-mobile.sm-page-widget-nav-mobile-items-visible .sm-page-widget-nav-menu-expand > a:visited {color: #FF2E00 !important;}

/**
* Changes Menu Text and Hamburger Icon Colors for Art Section
****************************************************************/
.sm-user-ui .sm-page-node-FrMvFh .sm-accordion > .sm-accordion-item > .sm-accordion-item-label,
.sm-user-ui .sm-page-node-FrMvFh .sm-accordion > .sm-accordion-item > .sm-accordion-item-label:visited,
.sm-user-ui .sm-page-node-FrMvFh .sm-page-widget-nav-mobile.sm-page-widget-nav-mobile-items-visible .sm-page-widget-nav-menu-expand > a,
.sm-user-ui .sm-page-node-FrMvFh .sm-page-widget-nav-mobile.sm-page-widget-nav-mobile-items-visible .sm-page-widget-nav-menu-expand > a:visited {color: #148FFF !important;}

tomlewisphotogprahy

Ok! Thanks Mike and for some reason I assumed that the part about the hexcode that @Lille Ulven mentioned was unimportant. Ohh the inexperience! 😂

Thanks for your help guys, this all helps towards me gaining an understanding of coding.

I'm starting to realise I already know quite a bit about html and I didn't know it, that's a nice feeling!

Lille Ulven

Don't worry about addressing your questions only to one person here, @tomlewisphotogprahy . I'll still jump in if I am around - which does not happen too often these days, unfortunately. (Days just don't have enough hours for me to do everything I would like to do.)
And yea, I am used to lads only listening to about 1/2 (or less) of what I say and then wondering why it does not work
@Hikin' Mike thanks for the correction looked like it worked but then didn't do it after all...life is too short to get everything right, I suppose

As for the history of Java coding: I once taught myself enough to get the Java Associate ... never written a line of it since. But I did learn a little JavaScript lately, which was actually fun, I just don't have the tasks to use it too often.
Anybody interested in a little bit of JavaScript to make Wordpress auto-publish certain elements within a blog post on a set date and time?

Have fun!

tomlewisphotogprahy

@Lille Ulven my partner says I only listen to half of what she says too! I think a pattern is forming... 🤫

I'm about half way through a Java course that I don't understand, I will finish it eventually and maybe it will help me later, in fact it's already helped me because these blocks of CSS don't look like a scary mess to me. I can make sense of them in some way, because I have a little experience with code I guess. I know more about photography, art and I'm a carpenter. I've always been good with my hands

This website is my first real project of this kind, and I have to say I'm loving it! The fact I only understand half your post saddens me a little 😂

Thanks and good evening/morning/day/night 😛

Lille Ulven

@tomlewisphotogprahy and I thought to protect myself from such "half understanding" here, by hiding behind the male form of my trail name... did not work...

Don't worry, in no time you'll understand the whole thing, too.
If it helps: I can't draw a straight line, let alone build furniture out of wood (IKEA does not count, one usually does not have to saw the tree down before setting it up). And after all, I am a database developer - yea, technical computer science is what I studied – when I am not into my photography. So code is a little closer to home than craftsmanship, though I admire it when it is well done.

Have a great evening/night/day too and a happy holiday season as well

Wiebke

tomlewisphotogprahy

@Hikin' Mike it works brilliantly

@Lille Ulven If you even happen to see my artwork, you'll see that I can't draw a straight line either, in fact I try to avoid doing just that. I prefer to paint abstract from my emotions and see what happens

I don't have to saw the tree down either before making furniture, and neither do Ikea as most of what they use isn't wood anyway, though it's a very good look alike!

The process of getting a tree down and dried is actually quite amazing, and also sad in a way. It's unbelievable that we can even have this process happen and still be able to cost effectively make something nice from it, and I'm sure it will all have to change for the future, maybe we will return to plastic furniture, there's enough of that around going to waste.

I never studied myself, something I do regret sometimes, so it's amazing to me that you're a database developer!

thanks