Footer Area Widgets aren't responding to responsive design

This topic has 2 replies, 2 voices, and was last updated 10 years, 2 months ago by FourQuadrants.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Posts
July 10, 2014 at 12:15 am #38479

FourQuadrants
Member

Hello, I tried to search for a solution to my problem, but could not see this potential issue has been ever posted.
I have CatchKatmandu Free version on http://fourquadrants.in/stocks/
When I see my site on my mobile phone or when I change the size of my desktop browser window to see how the page looks like in mobile screen, all sections seem to be adapting to the responsive code except the footer widget areas.
These do not change the shape and position and hence causing the footer area to look clustered and bad.
Could you please check and advise?

Thanks

July 10, 2014 at 1:21 am #38490
Sakin
Keymaster
@FourQuadrants: It’s strange did you change any style in responsive.css file? As when we test the theme in our server. The footer widget is working file. See our demo page at http://catchthemes.com/demo/catch-kathmandu/

I don’t see the following css. Can you add the following css in “Appearance => Theme Options => Custom CSS” box.
```
@media screen and (max-width: 640px) {
	#supplementary.three .widget-area {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}
}
```
July 10, 2014 at 2:00 am #38493
FourQuadrants
Member
Hello
Thanks for the prompt and quick reply. Those lines worked like magic.

I had not made any changes to the responsive.css, all files were installed by wordpress installer by my hosting site/company. I did install a couple of other themes to check which layout fits best, but I am not sure if those had anything to do with the error.

All I have written is a couple of CSS lines after reading from these forums to change the color of the links in the widget section and darken up the lines in widget . This is in the “Appearance => Theme Options => Custom CSS” box.
```
.widget-area .widget a {
	color: #21759b;
}
#secondary .widget {
	border: 1px solid #D0D2D5;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}
```
Once again, thank you very much for the reply. You guys are doing an awesome work!
Author

Posts