How to get a page element to be mobile responsive using media queries

[DawnT]

I am using the Agency theme. In the middle home page widget I have used the Site Origin features widget to list my services. This created one row with three columns. When you use the widget you can check responsive so it will be mobile responsive, but unfortunately that is not working.

On some devices the columns line up one below the other which is what I expected. But sometimes the columns stay within one row and the text is a jumbled mess.

My understanding is that I need to add some custom CSS code changes using media queries, but so far I haven't been able to figure out how to do this.

I would appreciate any help on the code to use to get this page element to be mobile responsive on all devices whether being viewed in portrait or landscape mode.

Thanks!

http:// http://staging.smartcookiecommunications.com/

[Christoph]

Hi,

you can try adding

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

to the 800px or 1023px media query.

You need !important because the width is defined through an inline style.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[DawnT]

Hi Christoph,

Thanks for replying. I don't code so this is all a little foreign to me. But I added the code you gave me to the CSS stylesheet to the 800px media query and the widget is now being responsive. On my iPhone each column lines up one after the other whether in portrait or landscape and on my iPad mini it is one row with three columns in landscape and the rows line up one after the other in portrait.

Thank you so much. I've spent so much time trying to figure this out. I appreciate the help!

[Author]

Posts