My wordpress blog (workmoneyfun.com) is on Genesis Framework Prose Theme which is fully mobile responsive. However, I increased the width of website content area which has resulted in non-optimized for mobile. I had added the following codes to increase width.
body {
background: #f5f5f5;
margin: 0 auto;
width: 1080px;
}
#inner {
width: 1070px;
padding: 0 10px;
}
.content-sidebar #content-sidebar-wrap {
width: 1040px;
}
.content-sidebar #content {
width: 680px;
}
.sidebar {
width: 320px;
}
.full-width-content #content {
width: 1000px;
}
.footer-widgets-1, .footer-widgets-3 {
width: 330px;
}
.footer-widgets-2 {
width: 280px;
}
How do I make my site mobile optimized with the current increased width area? Please suggest. Thanks.
I suggest to use % instead of px, use media query for the responsive.