Widget Responsiveness


#1

Hello,

I have used the ‘Site Origin Features’ Widget on the front page of my website. I have 3 icons aligned horizontally with attached links to other pages. On a desktop it looks great but on a mobile device all of the icons and icon descriptions are right aligned instead of centered like everything else. I have used the code below in other widgets to center the text on the page but it doesn’t seem to be working with this widget.

#text-5.widget_text .textwidget {
 text-align: center;
}

Is there a fix for this?

I have my site blocked until I am finished building it so I apologize I don’t have a link to share.


#2

Hello there,

Thank you for reporting.

Could you please try to apply the following CSS code?

.sow-features-list .sow-features-feature{
  width: 100% !important;
}

Let me know how it helps. If it didn’t help, please post your screenshot. You can upload it to the free image upload service like http://postimage.org/

Regards,
Kharis


#3

Hello,

Thanks for your response!

It did not seem to do the trick. A link for the screenshot is below. This is a screen shot of a mobile version of the site and you’ll see the 2 icons are not centered but aligned to the right.

http://postimg.org/image/byek3c31n/

I’d be happy to email you the login credentials to the site if you would need those as well.

Thank for your help!


#4

Hello there,

Thank you for updating me.

Yes, please send the login credentials to my email kharisblank at gmail dotcom with the link to this topic.

Regards,
Kharis


#5

Hello there,

Thank you for the login credentials.

Could you please try to apply the following CSS code?

@media only screen and (max-width: 1024px){
  .widget_sow-features .panel-widget-style{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }  
}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis


#6

Hello,

That worked perfectly! Thank you very much.