html - Media query not working for specific div class -
i've searched thoroughly on internet no avail. have below text left-author , right-author class
#wrapper-author { margin: 0 auto; padding: 15px; overflow: auto; } .left-author { width: 50%; vertical-align: top; float: left; } .right-author { width: 50%; vertical-align: top; float: right; } and media queries. every single query left-author , right-author work.
@media screen , (max-width: 380px) { .left-author .right-author { float: none; width: 100%; vertical-align: initial; } .widget_highlighted_posts .single-article { float: none; margin-right: 0; max-width: 100%; } } does have idea i'm doing wrong? here's html....
<div id="wrapper-author"> <div class="left-author clearfix"> <h4>i guess want know <?php the_author(); ?> is.</h4> <span style="font-family: sofia-pro; font-size: 20px;"><?php the_author_meta( 'description' ); ?></span><?php $count_posts = wp_count_posts(); $published_posts = $count_posts->publish; ?> </div> <div class="right-author clearfix"> <?php userphoto_the_author_photo() ?> <div class="social-links"> <ul> <li style="font-family: aw-conqueror-carved-one;">follow <?php the_author_meta( first_name ); ?> on</li> <?php $facebook = get_the_author_meta('facebook'); if ($facebook) { ?><li><a href="<?php the_author_meta('facebook'); ?>" target="_blank"><i class="fa fa-facebook"></i></a></li><?php } ?> <?php $twitter = get_the_author_meta('twitter'); if ($twitter) { ?><li><a href="http://twitter.com/<?php the_author_meta('twitter'); ?>" target="_blank"><i class="fa fa-twitter"></i></a></li><?php } ?> <?php $googleplus = get_the_author_meta('googleplus'); if ($googleplus) { ?><li><a href="<?php the_author_meta('googleplus'); ?>" target="_blank"><i class="fa fa-google-plus"></i></a></li><?php } ?> <?php $instagram = get_the_author_meta('instagram'); if ($instagram) { ?><li><a href="<?php the_author_meta('instagram'); ?>" target="_blank"><i class="fa fa-instagram"></i></a></li><?php } ?> <?php $pinterest = get_the_author_meta('pinterest'); if ($pinterest) { ?><li><a href="<?php the_author_meta('pinterest'); ?>" target="_blank"><i class="fa fa-pinterest"></i></a></li><?php } ?> <?php $email = get_the_author_email(); if ($email) { ?><a href="mailto:<?php the_author_email(); ?>"><i class="fa fa-envelope"></i></a></li><?php } ?> <li><a href="http://maphappy.org/author/<?php the_author_meta( 'user_login' ); ?>/feed/"><i class="fa fa-rss"></i></a></li> </ul></div> </div> </div>
your missing comma , separate 2 classes in same declaration
@media screen , (max-width: 380px) { .left-author, .right-author { float: none; width: 100%; vertical-align: initial; } .widget_highlighted_posts .single-article { float: none; margin-right: 0; max-width: 100%; } } update:(op has given html code)
you missing li open tag before a href:mailto (from saw not issue here)
so, here snippet html included (excluding php tags):
* { box-sizing:border-box; /*demo , applies box-model */ } #wrapper-author { margin: 0 auto; padding: 15px; overflow: auto; } .left-author { width: 50%; vertical-align: top; float: left; border:1px dashed green /* demo styles */ } .right-author { width: 50%; vertical-align: top; float: right; border:1px dashed red /* demo styles */ } @media screen , (max-width: 380px) { .left-author, .right-author { float: none; width: 100%; vertical-align: initial; } .widget_highlighted_posts .single-article { float: none; margin-right: 0; max-width: 100%; } }<div id="wrapper-author"> <div class="left-author clearfix"> <h4>i guess want know is.</h4> <span style="font-family: sofia-pro; font-size: 20px;"></span> </div> <div class="right-author clearfix"> <div class="social-links"> <ul> <li style="font-family: aw-conqueror-carved-one;">follow <li><a href="" target="_blank"><i class="fa fa-facebook"></i></a> </li> <li><a href="" target="_blank"><i class="fa fa-twitter"></i></a> </li> <li><a href="" target="_blank"><i class="fa fa-google-plus"></i></a> </li> <li><a href="" target="_blank"><i class="fa fa-instagram"></i></a> </li> <li><a href="" target="_blank"><i class="fa fa-pinterest"></i></a> </li> <!--the opening li tag missing here below --> <li><a href="mailto:"><i class="fa fa-envelope"></i></a> </li> <li><a href="http://maphappy.org/author/feed/"><i class="fa fa-rss"></i></a> </li> </ul> </div> </div> </div>
Comments
Post a Comment