Community Forums › Forums › Archived Forums › Design Tips and Tricks › Media Querries Don't Work on Front-Page
Tagged: media querries, viewport
- This topic has 1 reply, 2 voices, and was last updated 7 years, 8 months ago by William.
-
AuthorPosts
-
July 10, 2016 at 1:44 pm #189221vmouraviMember
Hello!
I have a front-page that has 10 widget areas, a header and a footer.
I have created a media querry for that page in a separate front-page.css.The problem is that the width of the elements DOESN'T change to 100% of the screen size (1024). Everything else changes (font-size, paddings. margins).....
The width stays the same no matter what!! Please help!!!!
/* Front Page Media Querry */
@media screen and (max-width:1024px) {/* Header */
.site-header .simple-social-icons{
display: none;
}/* Home Welcome */
.full{
width: 100%;
}.site-container{
width: 100%;
}.full .home-welcome{
width: 100%;
}.full .why-wp{
width: 100%;
}.full .wp-service{
width: 100%;
}.full .wp-process{
width: 100%;
}.full .seo-keywords{
width: 100%;
}.full .seo-keywords-ltk{
width: 100%;
}.full .seo-keywords-service{
width: 100%;
}.full .about-me{
width: 100%;
}.full .work-examples{
width: 100%;
}.full .call-to-action{
width: 100%;
}.site-header{
width: 100%;
}.site-footer{
width: 100%;
}/* Home Welcome */
.home-welcome .btn{
font-size: 20px;
padding: 5px 15px;
}.home-welcome .intro-action{
margin-top: 10px;
}.home-welcome .textwidget{
font-size: 30px;
}.home-welcome widgettitle{
margin-top: 15px;
margin-bottom: 20px;
font-size: 20px;
}/* Why WP */
.why-wp .widgettitle{
font-size: 30px;
}.why-wp .wp-start-description{
font-size: 20px;
line-height: 1.3;
margin-bottom: 20px;
}.why-wp .task-container{
width:100%;
float: none;
padding: 0;
}.why-wp .task-description{
margin-bottom: 25px;
}.why-wp .all-tasks{
padding: 0 250px;
}/* WP SERVICE */
.wp-service .widgettitle{
font-size: 30px;
}.wp-service .wp-install-details{
font-size: 20px;
line-height: 1.3;
margin-bottom: 20px;
}.wp-service .plugin-container{
width: 740px;
margin-bottom: 10px;
}.wp-service .plugin-description{
font-size: 19px;
width: 500px;
padding-left: none;
line-height: 1.4;
}.wp-service .all-plugins{
padding: 0 40px 0 50px;
}/* WP PROCESS */
.wp-process .widgettitle{
font-size: 30px;
}.wp-process .sponsored-offer{
font-size: 20px;
line-height: 1.3;
margin-bottom: 20px;
}.wp-process .step{
width: 880px;
height: 130px;
}.wp-process .all-steps{
padding: 0 40px 0 50px;
}.wp-process .step-text{
font-size: 19px;
line-height: 1.3;
margin: 0;
}.wp-processs .steps-text-container{
width: 470px;
height: 145px;
}.wp-process .btn2-link{
font-size: 17px;
padding: 10px;
}.wp-process .btn2{
padding-top: 50px;
}/* SEO KEYWORDS */
.seo-keywords .arrow{
display: none;
}.seo-keywords .arrow2{
display: none;
}.seo-keywords .challenge{
float: none;
}.seo-keywords .challenge2{
float: none;
}.seo-keywords .widgettitle{
font-size: 30px;
}.seo-keywords .challenges-intro{
font-size: 20px;
line-height: 1.2;
}.seo-keywords .challenge-arrow{
margin-bottom: 30px;
}/* Seo Keywords LTK */
.seo-keywords-ltk .widgettitle{
font-size: 30px;
}.seo-keywords-ltk .strategy-bullet{
width: 600px;
}.seo-keywords-ltk .strategy-item{
width: 700px;
}.seo-keywords-ltk .strategy-highlight{
margin: 0 auto;
font-size: 23px;
}/* SEO Research Service */
.seo-keywords-service .widgettitle{
font-size: 30px;
}.seo-keywords-service .research-service-intro{
font-size: 20px;
line-hight: 1.3;
}.seo-keywords-service .seo-report-title{
font-size: 21px;
}.seo-keywords-service ul{
width: 700px;
}.seo-keywords-service li{
font-size: 20px;
}/* About */
.about-me .widgettitle{
font-size: 30px;
}.about-me .about-img{
float: none;
margin-left: 200px;
}.about-me .about-text{
width: 500px;
height: auto;
float: none;
margin-left: 200px;
font-size: 20px;
}/* Recent Works */
.work-examples .widgettitle{
font-size: 30px;
}.work-examples .examples-intro{
font-size: 20px;
line-height: 1.3;
}.work-examples .examples-container{
width: 500px;
}.work-examples .examples-img-1{
float: none;
}.work-examples .examples-img-2{
float: none;
}/* CALL TO ACTION */
.call-to-action .widget-wrap{
max-width: 700px;
}.call-to-action .widget-wrap{
margin-left: 100px;
}.call-to-action .leave-message{
width: 300px;
}}
http://redinvasion.comJuly 11, 2016 at 5:34 am #189237WilliamMemberHi there,
@media only screen and (max-width: 1140px) { /* My CSS */ }
🙂
Genesis Customization Service | Quick fixes whenever you need them ! | Contact me at Fixmysite.com !
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.