This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Mobile footer text alignment

Open 18 replies premiumthemetheme-vantage
Chandran V
11 years ago · Last reply by Magus 10 years ago

Hi Andrew, many thanks for all the help you have been giving. Could you tell me how I can do a center alignment for the footer text in the mobile mode and make the logo in the footer clickable to bring viewers up to the top of the home page, please. Thank you.

URL: http://atcasorg.org.sg

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

18
  1. Andrew Misplon Staff 11 years, 1 month ago

    I’m unfortunately unable to access your site at the moment. Perhaps you can check that it’s up.

  2. Chandran V 11 years, 1 month ago

    Hi Andrew, sorry to hear you couldn’t get to my site. It seems to be OK now.

  3. Andrew Misplon Staff 11 years, 1 month ago

    Sorry, still not loading for me. Not sure what’s up. I’ll try again later.

  4. Chandran V 11 years, 1 month ago

    OK thanks. Appreciate it, Andrew.

  5. Andrew Misplon Staff 11 years, 1 month ago

    I think the url in the thread is wrong. Let me check again.

  6. Andrew Misplon Staff 11 years, 1 month ago

    Edit the image in the footer by hovering over it in Visual Editor and click the pencil. Then edit the link and change it to:

    #page-wrapper

    And insert the following under Appearance > Custom CSS:

    /* Footer */
@media (max-width: 680px) {
#colophon .textwidget { 
text-align: center;
}
#colophon .textwidget p[style] { 
text-align: center !important;
}
}
  7. Chandran V 11 years, 1 month ago

    Absolutely wonderful !! A very big thank you, Andrew. Cheers !

  8. Chandran V 11 years, 1 month ago

    Very sorry for the wrong url.

  9. Andrew Misplon Staff 11 years, 1 month ago

    Awesome glad that helped.

    No worries, I’m pushing to move quickly, I should have stopped to read the url properly.

  10. Chandran V 10 years, 9 months ago

    Hi Andrew,
    I changed the font in my footer text and the “OFFICE ADDRESS” para does not center itself in mobile mode. The “MAILING ADDRESS” para is centered correctly. Please help. Thanks.

  11. Magus Staff 10 years, 9 months ago

    Hi Chandran

    Because of the formatting change you will need to change the original CSS to this

    @media (max-width: 680px) {
#colophon .textwidget h3 { 
text-align: center;
}
#colophon .textwidget p[style] { 
text-align: center !important;
}
}

    Hope this helps

    Magus

  12. Chandran V 10 years, 9 months ago

    Thanks Magus. It worked but I had to add the word “important” to the first set of css.
    What do I need to do to get the same effect in ipads?

  13. Magus Staff 10 years, 9 months ago

    Hi Chandran

    ipads have a minimum native resolution of 1024 x 768 so to get the elements to stack on an ipad you would just need to change the max width from 680px to 768px.

    There are ways to specifically target ipads but that does involve adding some javascript and then some more custom CSS.

    If you want to go this way I can help but changing the viewport minimum width would be the easiest for you.

    Magus

  14. Magus Staff 10 years, 9 months ago

    Hi again Chandran

    Been looking into this a bit more and you could use this to specifically target ipads

    @media only screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-min-device-pixel-ratio: 1)
 {
#colophon .textwidget h3 { 
text-align: center !important;
}
#colophon .textwidget p[style] { 
text-align: center !important;
}
}

    Magus

  15. Chandran V 10 years, 9 months ago

    Should I keep the “max-width 680” ? I replaced the css with the new one and the alignment is not working in iphone.

  16. Magus Staff 10 years, 9 months ago

    yes, keep the 680px one. The last one targets devices with the specific screen attributes of the ipad.

    Magus

  17. Chandran V 10 years, 9 months ago

    Sorry I didn’t read your reply fully. I think I will stick to changing the max-width to 768px for now. Thank you very much for your very quick responses.

    Cheers !

  18. Magus Staff 10 years, 9 months ago

    Hi Candran

    I think maybe you misunderstood.

    Leave the original one with the 680px width setting and add the last one as a separate entry. They will not conflict with each other and it means that users with other hardware types will still see the site the way you intended.

    Magus

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread