Centre icons on mobile

PrecisionPaperwork · May 2015

Hi.

In your Lawyer demo, the icons in the 'our services' page are right aligned. Is there a way to make them centre aligned when viewed on a mobile screen (i.e. 480px) and the icons move above the text? In your demo they stay right aligned on small screens, but I'd like to know how to make them centred (centred only on small screens, right aligned as usual on all other screen sized). I'd like to learn the way to do this so I can get the layouts the way I like myself without having to ask you guys ;-)

I've tried adding a custom class ID to the icons, but my CSS knowledge is lacking when it comes to using the @media function along with the custom css.

Thanks...

Albert · May 2015

Hi,

if you will send us url to page where you want to do this and you will show on on screenshot with icons you mean, we'll check if it's possible.

Thanks!

PrecisionPaperwork · May 2015

http://precisionwebsites.co.uk/our-services/

I'm looking to make the icons on the left become centred when the screen is mobile sized and the icons move to above the text (rather than alongside the text as with larger screens).

Albert · May 2015

To center this icon, please use below css:

@media only screen and (max-width: 767px) {
    #residential .one-fifth .image_frame.alignright { float: none !important; width: 100% !important; text-align: center !important; }
}

PrecisionPaperwork · May 2015

Thanks!

If I want to apply the same code to the other icons, do I repeat the "#residential" line for each of the other icons, or can I apply a custom style to all the icons and do it with one line?

Just trying to learn as well as copy/paste! :-)

Albert · May 2015

Yes, you must repeat it every time.

Centre icons on mobile

Comments