Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
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.
I’m unfortunately unable to access your site at the moment. Perhaps you can check that it’s up.
Hi Andrew, sorry to hear you couldn’t get to my site. It seems to be OK now.
Sorry, still not loading for me. Not sure what’s up. I’ll try again later.
OK thanks. Appreciate it, Andrew.
I think the url in the thread is wrong. Let me check again.
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:
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; } }Absolutely wonderful !! A very big thank you, Andrew. Cheers !
Very sorry for the wrong url.
Awesome glad that helped.
No worries, I’m pushing to move quickly, I should have stopped to read the url properly.
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.
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
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?
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
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
Should I keep the “max-width 680” ? I replaced the css with the new one and the alignment is not working in iphone.
yes, keep the 680px one. The last one targets devices with the specific screen attributes of the ipad.
Magus
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 !
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