Footer customization for mobile

dipanjan94

I have the following three questions:

1. I have added my menu items manually in my Footer using HTML/CSS. I love how they look on the the big screen, but for my mobile, I want the items to be centrally aligned, essentially having one menu item in each line. How can I do this?
2. In the header of my website which contains all the menu items, is it possible to manually set letter spacing?
3. If you search using the searchbox in my footer, (search by the word "Coexistence", it should return one image) I get an image where the caption is all white. This looks a bit odd because I have white background in my website. I think this is happening because of this one https://dgrin.com/discussion/266297/stretchy-banner-in-a-fixed-with-page#latest (refer to the answer of second question). Is there any way to work around this? Like having my gallery look the same but change the text colour/font if someone searches using the search box?

Hikin' Mike

@dipanjan94 said:
1. I have added my menu items manually in my Footer using HTML/CSS. I love how they look on the the big screen, but for my mobile, I want the items to be centrally aligned, essentially having one menu item in each line. How can I do this?

Remove ALL of the HTML code. Never add spaces to center text. That's why we use CSS. Add this in the HTML section:

<ul class="footer-menu">
  <li><a href="https://www.dipanjanpal.com/">HOME</a></li>
  <li><a href="https://www.dipanjanpal.com/Portfolio">PORTFOLIO</a></li>
  <li><a href="https://www.dipanjanpal.com/Prints">BUY PRINTS</a></li>
  <li><a href="https://www.dipanjanpal.com/Blog">BLOG</a></li>
  <li><a href="https://www.dipanjanpal.com/About">ABOUT</a></li>
</ul>

The CSS section:

.footer-menu {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

.footer-menu li {
  margin: auto 1rem;
  font-size: 2em;
}

@media (max-width: 736px) {

  .footer-menu {
    display: block;
    text-align: center;
  }

  .footer-menu li {margin: 1rem auto;}

}

@dipanjan94 said:
2. In the header of my website which contains all the menu items, is it possible to manually set letter spacing?

.sm-user-ui .sm-page-widget-nav-toplink > a {letter-spacing: 2px;}

@dipanjan94 said:
3. If you search using the searchbox in my footer, (search by the word "Coexistence", it should return one image) I get an image where the caption is all white. This looks a bit odd because I have white background in my website. I think this is happening because of this one https://dgrin.com/discussion/266297/stretchy-banner-in-a-fixed-with-page#latest (refer to the answer of second question). Is there any way to work around this? Like having my gallery look the same but change the text colour/font if someone searches using the search box?

You just need to get more specific with your CSS. Find this:

.sm-user-ui .sm-tile-info .sm-tile-title {
    font-size: 45px;
    font-weight: 400;
    color: #fff;
    font-family: Pathway Gothic One,Roboto,Helvetica,Arial,sans-serif;
    text-transform: uppercase;
    letter-spacing: 7px;
    text-shadow: 4px 3px rgba(0,0,0,0.1);
}

Add .sm-tile-album like this:

.sm-user-ui .sm-tile-album .sm-tile-info .sm-tile-title {
    font-size: 45px;
    font-weight: 400;
    color: #fff;
    font-family: Pathway Gothic One,Roboto,Helvetica,Arial,sans-serif;
    text-transform: uppercase;
    letter-spacing: 7px;
    text-shadow: 4px 3px rgba(0,0,0,0.1);
}

dipanjan94

Thank you so much! This solved all of my queries! Just one little thing, where do I add the text colour in the the following css?

.footer-menu {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

.footer-menu li {
  margin: auto 1rem;
  font-size: 2em;
}

@media (max-width: 736px) {

  .footer-menu {
    display: block;
    text-align: center;
  }

  .footer-menu li {margin: 1rem auto;}

}

I tried to add color: white; inside .footer-menu li and it didn't work. What am I doing wrong?

Hikin' Mike

@dipanjan94 said:
I tried to add color: white; inside .footer-menu li and it didn't work. What am I doing wrong?

It's a link so you'll need .footer-menu li a and .footer-menu li a:hover for the hover.

dipanjan94

It's a link so you'll need .footer-menu li a and .footer-menu li a:hover for the hover.

Perfect, thank you! I missed it.

I was also trying to add social media icons to my footer, but I couldn't make the icon colors to be white. Since I already have a dark footer, it doesn't look good. I was adding the icons using the usual content block.

Is there any way add the icons and change their color/hover color as well?

Hikin' Mike

@dipanjan94 said:
I was also trying to add social media icons to my footer, but I couldn't make the icon colors to be white. Since I already have a dark footer, it doesn't look good. I was adding the icons using the usual content block.

Is there any way add the icons and change their color/hover color as well?

.sm-user-ui .sm-page-widget-social-links a {color: white;}

dipanjan94

It changes the color of all the social icons in my website. Could we restrict it to only changing the colour of social icons in the footer?

Hikin' Mike

@dipanjan94 said:
It changes the color of all the social icons in my website. Could we restrict it to only changing the colour of social icons in the footer?

.sm-user-ui .sm-page-layout-region-footer .sm-page-widget-social-links a {color: white;}

dipanjan94

Thank you so much! Worked perfectly.

shearerviljoen

Hey guys. I know I didn't create this discussion, but I have an issue I'm hoping to resolve that fits to "Footer customization for mobile"

I have a footer displayed across my entire website, but on a specificities page, I don't want it displayed.

I'm not at all clued up with CSS but tried to give it a go first before asking, and came up with this CSS which I have put on that specific page:

.sm-user-ui .sm-page-layout-region-footer {
display: none;
}

@media screen and (max-width: 736px) {
.sm-page-layout-region-footer {
display: none;}
}

On desktop, it seems to have worked, but on Mobile the footer is still displayed.
I tried first without the @media section, but it also displayed on mobile then.

Could someone point me in the right direction please?
Thanks.

Hikin' Mike

@shearerviljoen said:
Hey guys. I know I didn't create this discussion, but I have an issue I'm hoping to resolve that fits to "Footer customization for mobile"

I have a footer displayed across my entire website, but on a specificities page, I don't want it displayed.

I'm not at all clued up with CSS but tried to give it a go first before asking, and came up with this CSS which I have put on that specific page:

.sm-user-ui .sm-page-layout-region-footer {
display: none;
}

@media screen and (max-width: 736px) {
.sm-page-layout-region-footer {
display: none;}
}

On desktop, it seems to have worked, but on Mobile the footer is still displayed.
I tried first without the @media section, but it also displayed on mobile then.

Could someone point me in the right direction please?
Thanks.

Without seeing your site, I have no idea.

It is best to create a new thread for the next time.

Hikin' Mike

@shearerviljoen said:
Could someone point me in the right direction please?
Thanks.

You'll just need to add !important here:

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

  .sm-user-ui .sm-page-layout-region-footer {display: none !important;}

}

shearerviljoen

Alright will create a new thread the next time. And thanks @Hikin' Mike it did work. Footer on specificities page is hidden now.