Width problem on mobile

Hi there.

I use Sydney theme and I really like it.
But now I’m stuck on responsiveness setting.

In a text widget, I set “Full Width Stretched” and use CSS style to make it narrower like this:

.et_pb_row {
	position: relative;;
	width: 60% !important;
	max-width: 60%;
	margin-left:auto;
	margin-right:auto;
}

However, it is too narrow for smartphone so I would like to change the width according to device. How can I fix it?

Hello @D3morgan,

You can use CSS Media Queries, here is a tutorial.

Also you can open style.css file of Sydney theme, scroll down to Media Queries section and see how it’s done in Sydney.

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Thank you @Roman.

I tried some queries, but it didn’t work.
Could you please tell me more about that?

Okay @D3morgan,

I will be glad to help you, but can you please provide more details about your issue, some explanatory screenshots, and a link to your website to let me inspect it?

Kind Regards, Roman.

Dear @Roman,

OK, here is my website: http://icu-fes.sakura.ne.jp/2016prep/sig/ (Sorry, it’s in Japanese)
Now I use CSS style which I wrote above for each widget, and I’d like to make the text 100% width when I view it on smartphone.

Thank you for your help.

Please try to remove !important from your code above and add this:

@media only screen and (max-width: 479px) {
    .widget div.panel-widget-style {
        width: 80% !important;
        max-width: 80% !important;
    }
}

You can add CSS code to your site with Simple Custom CSS plugin (just copy CSS code and paste it in Dashboard → Appearance → Custom CSS after installing and activating the plugin). Also you can add CSS code directly to style.css file of your child theme.

Kind Regards, Roman.

Dear @Roman,

It works perfectly!
Again, thank you for your help.

You are welcome D3morgan!

And have a nice day :slight_smile:

Kind Regards, Roman.