Docs

[rogerskeri]

Hello,

When viewing a website that I’m creating, the social media images are not responsive on mobile phones and show up really large. Is there a way to downsize the images somehow to where they look much cleaner when viewing the website on mobile devices?

[rogerskeri]

This reply has been marked as private.

[Rad]

Hi there,

Thanks for writing in.

What social images you’re currently referring? Is it the icons? Would you mind providing some details of how I can reproduce this issue on my end. Screenshot will help too 🙂

Thanks!

[rogerskeri]

Here’s what the images are looking like on mobile devices. They are too large. I will probably need to create separate id’s for each one, yeah?

[Nico]

Hi There,

Add this in your customizer’s custom CSS this will adjust the size of the colum:

@media (max-width: 767px)
.icon-social-media .x-column.x-sm {
    float: left;
    width: 20%;
    margin-right: 0;
}

Adjust the width to adjust the size of the icon in mobile devices.

Hope it helps.

Thanks.

[rogerskeri]

No, it didn’t work at all 🙁

[Friech]

Hi There,

Add a class to each of those images icon.

e.g.
myclass

And then add this on your custom css

@media (max-width:  480px) {
	.myclass {
    max-width: 25%;
    margin: 0 auto 12px;
	}
}

Hope it helps, Cheers!

[rogerskeri]

Ok, this works great. I added some more css styling to make the images inline. Now, I have an issue with the images being stuck together. I’ve tried adjusting the padding to separate them, but to no avail. Can you assist?

[Rupok]

Hi there,

Thanks for updating. Let’s add the below code within your media query :

.x-img.myclass > img {
  padding: 10px;
}

Hope this helps.

Cheers!

[rogerskeri]

BOOM!!!!! IT WORKS! THANK YOU!!!!!!!!!!!!!!!!!! YOU GUYS ARE THE BEST!

[Prasant Rai]

Happy to hear that. Feel free to ask us again. Have a great day! 🙂

[Author]

Posts