Icon Boxes not responsive?

EffieMcNair · July 2017

Hi There,

I've been using Icon Boxes in a few pages, but now encounter problem to display these pages on mobiles as it seems not responsive.

Here is the link: http://www.solarpowerpanels.net.au/solar-panels-reviews/jinko-solar-panels-review/

Please advise what would be the way to go about it

Thanks, Effie

Bryan · July 2017

Hi,

please update the theme to the newest version.

thanks

SLEGRAND · July 2017

Hi,

Last update made (20.2), but I'm still having the same problem.

Between 750 and 800 px, the icon goes to the top, but not under 750 px. The icon stay on left and the text column is very very thin on an iPhone 6.

I tried to change grid size in the options and I'm looking for custom CSS, but nothing works.

http://histoiredeboa.com

Thanks for any help and for your great work.

Stéphane.

Bryan · July 2017

When you edit the icon box item or use the shortcode you do have an option for position, either left or top. If you want left on desktop and top on mobile then use this custom css

@media (max-width:767px) {
	.icon_box.icon_position_left .icon_wrapper {
		position:relative !important;
		
	}
	.icon_box.icon_position_left {
		padding:10px !important;
	}

}

EffieMcNair · July 2017

Hi There,

I've upgraded to the latest version and applied your code, but the icons overlap the text instead move to the top...please check here: http://www.solarpowerpanels.net.au/solar-panels-reviews/sunpower-solar-panels-review/

Bryan · July 2017

I just edited the previous css, replace it.

EffieMcNair · July 2017

-

EffieMcNair · July 2017

It's working only with its own icons..but not if I add images. please check here:

http://www.solarpowerpanels.net.au/solar-panels-reviews/rec-solar-panels-review/

SLEGRAND · July 2017

Good for me. Thanks !!!!

EffieMcNair · July 2017

SLEGRAND .....I just checked yours and it is looking just as before...the icons on the left and the text column is thin...

SLEGRAND · July 2017

Right but I've made my tests on another url, I must update the main one. It doesn't look good on yours too ?!

SLEGRAND · July 2017

Hi again Effie.

With my own image (like you), it works by changing .icon_wrapper by .image_wrapper on line #2

Works fine on a 17.1 version with a red border to test (http://boah.projet-com.com)

Doesn't work on a 20.2 version (http://histoiredeboa.com) . It's like nothing append

@media (max-width:767px) {

.icon_box.icon_position_left .image_wrapper {

position:relative !important;

}

.icon_box.icon_position_left {

padding:10px !important;

}

Still not resolved in fact...

SLEGRAND · July 2017

It works on 20.2, it was because of my cache plugin...

EffieMcNair · July 2017

Thanks SLEGRAND! Now it is working with images too! :-) Thank you so much for the code! ...( it seems that 'muffin Support' gone to bed already... ;-) )

Yes, it seems to work on both versions...but I guess it wouldn't hurt to upgrade to v.20 anyway...

Cheers, Effie

SLEGRAND · July 2017

You're very welcome Effie

I hope to see more responsive options in the Muffin builder soon.

Let's see.

Cheers from France, Stéphane.

EffieMcNair · July 2017

Cheers from Australia :-)

Icon Boxes not responsive?

Comments