Docs

[owaves]

Hello,

I have an issue with my site’s mobile view. The footer has been customized and I am curious what the best way to fix the alignment of the elements. The download button, social icons, and form field need to be centered. What do I do to fix this? Thanks. I will reply with my login info.

Site: http://www.owaves.com/x/

[owaves]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in and the very detailed information. To resolve this issue, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(max-width: 979px){
  .page-id-3966 #x-section-7 .x-column,
  .page-id-3966 #x-section-7 .x-column img{
    margin: 0 auto !important;
  }

  .x-colophon.top .x-column:first-child .widget{
      text-align: center !important;
  }

  .x-colophon.top .x-column .widget *{
     float: none;
    text-align: center !important;
  }

  #signup,
  .mc4wp-form-fields p.email {
      margin: 0 auto;
  }

  .mc4wp-form-fields p.email,
  .mc4wp-form-fields p.send,
  .mc4wp-form-fields p > * {
      float: none;
      display: block;
      margin: 0 auto !important;
  }

  .textwidget .footsocial {
    margin-top: 15px;
    width: auto;
    margin: 0 auto !important;
    float: none;
    text-align: center !important;
  }

  .textwidget .footsocial a{
      float: none;
      display: inline-block;
  }
}

We would loved to know if this has work for you. Thank you.

[owaves]

This is wonderful it worked! How would I fix my nav down there? I just want the links displayed like the global nav. Thanks!

[Friech]

Hi There,

You can add this under Custom > CSS in the Customizer.

@media (max-width:  979px) {
	.x-colophon.bottom .x-colophon-content,
	.x-colophon.bottom .x-container.max.width,
	#menu-footer-menu {
		width: initial;
	}
	.x-colophon.bottom .x-nav li {
		display: block;
	}
	.x-colophon.bottom .x-colophon-content {
		float: none;
		margin-top: 0;
	}
}

Hope it helps, Cheers!

[owaves]

Thanks, how would I center it?

[Rue Nel]

Hello There,

To center the menu items, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(max-width: 979px){
  .x-navbar .mobile .x-nav {
    text-align: center;
  }

  .x-navbar .mobile .x-nav li {
    display: inline-block;
  }

  .x-navbar .mobile .x-nav li>a {
    float: none;
    padding: 0 10px 0 1em;
  }
}

Hope this helps.

[owaves]

This code didn’t center the footer.

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

@media (max-width: 979px) {
.x-colophon.bottom .x-nav {
    text-align: center;
    margin-left: 0;
}

.x-colophon.bottom .x-nav li {
    display: inline-block !important;
}
}

Hope that helps

[owaves]

That code doesn’t seem to be doing the trick either..I found that the selector “.x-colophon.bottom .x-colophon-content, .x-colophon.bottom .x-container.max.width, #menu-footer-menu” changes it in the inspector but not when added to the main css.

[Lely]

Hi There,

Previous suggested CSS is working when I check. It centered the menu on the footer. But there’s conflict. The margin left on the following CSS adjust it on the left:

#menu-footer-menu {
    margin-left: -26px;
    margin-top: 30px;
    width: 500px;
}

Try to remove this line: margin-left: -26px; from above CSS declaration and it should work.

Hope this helps.

[owaves]

I removed that code and my footer is centered however now the bottom copyright is not centered. Also that code is needed for the desktop view so that the footer menu can sit left aligned.

[Christopher]

Hi there,

Please remove this code :

.x-colophon.bottom .x-colophon-content {
    float: right;
    margin-right: -10px;
    margin-top: -26px;
    max-width: 150px;
}

If you need further assist, please provide us with mockup.

Hope it helps.

[Author]

Posts