Sidebar position on smartphone

Hi, I’m have a little bother with the position of the sidebar when viewed on smartphones.

I found that the content area and widget area remain side by side, which looks a little cramped when a phone is held portrait. To overcome this I added the following:

@media only screen and (min-device-width: 320px)and (max-device-width: 640px)
and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait){
.content-area {
		width: 100% !important;
	}
	
	.widget-area {
		width: 100% !important;
		float: none !important;
	}
}

This worked for my iPhone and I thought all was well, but then decided to look on hubby’s Samsung Galaxy and found that the original issue persisted. With a quick bit of Googling I found that I could use:

@media screen and (min-device-width: 320px) and (max-device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (device-aspect-ratio: 9/16) and (orientation: portrait) {//code}
}

But this hasn’t helped. It’s as if Galaxy doesn’t want to know @media!

Any ideas would be much appreciated! To take a look at the site in question please go to: this website you will need the password: HotChocolate and then please see the contact page which uses the sidebar.

TIA

Hello Lesley,

You have the following custom CSS rules that cause this issue. Please try to remove them or wrap them in proper @media rules.

.content-area {
    width: 55%;
}

.widget-area {
    width: 45%;
    padding: 30px;
}

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

Kind Regards, Roman.