Header too wide and remove absolute positioning on header ad in mobile view.

On a site I'm helping a friend fix http://emotionalfuel.com/ most of the site looks good in mobile view except the header. I've put

@media screen and (max-width: 1002px) and (min-width: 768px) {
#logo {
      max-width: 597px;
      overflow: hidden;
}
#topform {
      position: relative;
}
in CSS but logo is still way too wide and topform is still plastered over header.

How do I fix this?
LVL 9
Bob StoneIT GuruAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Steve BinkCommented:
#topform is set as position;relative, which takes it out of the normal flow.  That means it a) appears as a higher z-index than normal flow elements (e.g., #logo), and b) it will appear relative to the position it would have had as a normal flow box.

If you want to hide #topform, use display:none.
0
Bob StoneIT GuruAuthor Commented:
That's one solution to half the problem. Doesn't solve the header being too wide thing and I'd like it to be under the main header, or somewhere on the page just not on top of header.
0
Steve BinkCommented:
One of the problems I've seen in your HTML structure is that it does not support the "normal" flow of what you want to do.  That means #topform needs to be positioned (absolute or relative) in order to have it show up where you want it.  That, in turn, leads to some funky CSS requirements, especially when responding to viewport changes.

I recommend going back to your structure for a little reorganization.  If #topform should be part of #main-header-wrapper, then make it part of #main-header-wrapper.  If you want them to flow naturally, mark #topform and #header as inline-block, and allow them to re-flow naturally on resizing.  As it is, your structure is working against you.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Bob StoneIT GuruAuthor Commented:
OK, how so?
0
Steve BinkCommented:
I'm not a Wordpress guy, so I can't direct you in editing your theme.  That said, it could use some editing.  EVERYTHING is a float at the top level, which makes it difficult to move things around.  Moving #topform to be inside #main-header-wrapper allows your CSS to use natural flow.
0
Bob StoneIT GuruAuthor Commented:
Clearly it needs more editing, just not entirely sure where and what, hence the question here.
0
Steve BinkCommented:
That's really more of a question of design strategy than anything specific to Wordpress.  The issue is that it *is* in Wordpress, which means any edits have to consider the environment as well.

Still, editing your structure to follow a more natural flow should not be that difficult.  Do you have enough expertise in HTML and CSS to change this structure?
0
Bob StoneIT GuruAuthor Commented:
The entire theme doesn't need redone just the header width in mobile view mostly. Do you not have enough expertise in CSS to suggest anything more helpful than 'redo the whole thing'?
0
Steve BinkCommented:
I surely do, but this is not necessarily a quick project.  Given the source files, I can be a bit more descriptive in my recommendations, but the final responsibility for redesigning the structure is going to fall to you.  

At the very least, the header needs to be redesigned to not rely so heavily on floats.  From what I've seen, the elements you are ascribing to the header are not necessarily in the header, which means redesign in going to impact other sections of the template.  You also have to worry about the parent/hierarchy, and how particular CSS selectors will be impacted.  

This could end up being something quick and easy.  It could also fall apart into a labyrinthine mess the moment you pull the first thread.  Post your source files, and we can take a more in-depth look.
0
Bob StoneIT GuruAuthor Commented:
Header.php
<?php
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date in the past
?>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head>

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">


<?php if (  (function_exists('has_post_thumbnail')) && (has_post_thumbnail())  ) { ?>

<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'post-thumb' ); ?>

<meta property="og:image" content="<?php echo $thumb['0']; ?>" />

<?php } ?>



<title><?php wp_title( '-', true, 'right' ); ?></title>





<?php if(get_option('mm_favicon')) { ?><link rel="shortcut icon" href="<?php echo get_option('mm_favicon'); ?>" /><?php } ?>

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />

<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />

<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>



<?php $analytics = get_option('mm_tracking'); if ($analytics) { echo stripslashes($analytics); } ?>



<?php wp_head(); ?>



</head>



<body <?php body_class(); ?>>



<div id="site">

	<div id="top-wrapper">



		<?php if(get_option('mm_leader_ad')) { ?>

		<div id="leader-wrapper">

			<div id="leaderboard">	

				<div id="leader-left">

					<?php echo get_option('mm_leader_ad'); ?>

				</div><!--leader-left-->

			</div><!--leaderboard-->

		</div><!--leader-wrapper-->

		<?php } ?>

	</div><!--top-wrapper-->

	<div id="nav">

		<div id="main-nav-wrapper">

			<div id="main-nav">

				<div id="search-wrapper">

					<?php get_search_form(); ?>

				</div><!--search wrapper-->

				<?php wp_nav_menu(array('theme_location' => 'main-menu')); ?>

			</div><!--main-nav-->

			<?php include_once( ABSPATH . 'wp-admin/includes/plugin.php' ); ?>

			<?php if (is_plugin_active('menufication/menufication.php')) { ?>

			<?php } else { ?>

				<div id="nav-mobi">

					<?php wp_nav_menu(array( 'theme_location' => 'main-menu', 'items_wrap' => '<select><option value="#">Menu</option>%3$s</select>', 'walker' => new select_menu_walker() )); ?>

				</div><!--nav-mobi-->

			<?php } ?>


		</div><!--main-nav-wrapper-->

	</div><!--nav-->

	<div id="wrapper">

		<?php if(get_option('mm_wall_ad')) { ?>

		<div id="wallpaper">

			<?php if(get_option('mm_wall_url')) { ?>

			<a href="<?php echo get_option('mm_wall_url'); ?>" class="wallpaper-link"></a>

			<?php } ?>

		</div><!--wallpaper-->

		<?php } ?>

		<div id="inner-wrapper">

			<div id="content">

				<div id="main-header-wrapper">

					<div id="header">

						<div id="logo" itemscope itemtype="http://schema.org/Organization">

							<?php if(get_option('mm_logo')) { ?>

							<a itemprop="url" href="<?php echo home_url(); ?>"><img itemprop="logo" src="<?php echo get_option('mm_logo'); ?>" alt="<?php bloginfo( 'name' ); ?>" style="max-width: 100%;height: auto" /></a>

							<?php } else { ?>

							<a itemprop="url" href="<?php echo home_url(); ?>"><img itemprop="logo" src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="<?php bloginfo( 'name' ); ?>" style="max-width: 100%;height: auto" /></a>

							<?php } ?>

						</div><!--logo-->

					</div><!--header-->

				</div><!--main-header-wrapper-->

				<div id="content-top">

					<div id="ticker">

						<span class="ticker-heading"><?php _e( "Don't Miss", 'mvp-text' ); ?></span>

						<ul class="ticker-list">

							<?php $recent = new WP_Query(array( 'tag' => get_option('mm_ticker_tags'), 'showposts' => get_option('mm_ticker_num') )); while($recent->have_posts()) : $recent->the_post();?>

							<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>

							<?php endwhile; ?>

						</ul>

					</div><!--ticker-->

					<div id="content-social">

							<ul>

							<?php if(get_option('mm_facebook')) { ?>

							<li><a href="http://www.facebook.com/<?php echo get_option('mm_facebook'); ?>" alt="Facebook" class="fb-but" target="_blank"></a></li><?php } ?>

							<?php if(get_option('mm_twitter')) { ?><li><a href="http://www.twitter.com/<?php echo get_option('mm_twitter'); ?>" alt="Twitter" class="twitter-but" target="_blank"></a></li><?php } ?>

							<?php if(get_option('mm_pinterest')) { ?><li><a href="http://www.pinterest.com/<?php echo get_option('mm_pinterest'); ?>" alt="Pinterest" class="pinterest-but" target="_blank"></a></li><?php } ?>

							<?php if(get_option('mm_instagram')) { ?><li><a href="http://www.instagram.com/<?php echo get_option('mm_instagram'); ?>" alt="Instagram" class="instagram-but" target="_blank"></a></li><?php } ?>

							<?php if(get_option('mm_google')) { ?><li><a href="<?php echo get_option('mm_google'); ?>" alt="Google Plus" class="google-but" target="_blank"></a></li><?php } ?>

							<?php if(get_option('mm_youtube')) { ?><li><a href="http://www.youtube.com/user/<?php echo get_option('mm_youtube'); ?>" alt="YouTube" class="youtube-but" target="_blank"></a></li><?php } ?>

							<?php if(get_option('mm_linkedin')) { ?><li><a href="http://www.linkedin.com/company/<?php echo get_option('mm_linkedin'); ?>" alt="Linkedin" class="linkedin-but" target="_blank"></a></li><?php } ?>

							<li><a href="<?php bloginfo('rss_url'); ?>" alt="RSS Feed" class="rss-but"></a></li>

						</ul>

					</div><!--content-social-->

				</div><!--content-top-->
<div id="topform"> 
          <h4>Receive Daily Motivational Quotes </h4>
to Motivate You<br>
and make you SMILE!<br><br>
<div id="checkoutbutton">
<p><a href="https://alexadvise.leadpages.co/leadbox/14585ac73f72a2%3A1336dc3ec346dc/5631383682678784/" target="_new">Click Here to Subscribe</a><script data-leadbox="14585ac73f72a2:1336dc3ec346dc" data-url="https://alexadvise.leadpages.co/leadbox/14585ac73f72a2%3A1336dc3ec346dc/5631383682678784/" data-config="%7B%7D" type="text/javascript" src="https://alexadvise.leadpages.co/leadbox-908.js"></script></p>
</div>
</div>

Open in new window


media-queries.css
@media screen and (max-width: 1002px) and (min-width: 768px) {

	#top-menu {
		max-width: 597px;
		}

#logo {
	max-width: 597px;
	overflow: hidden; 
	}

	
#topform {
	position: relative; 
}

	#leader-wrapper {
		padding: 5px 0;
		}

	#leaderboard {
		padding: 0 10px;
		width: 748px;
		height: auto;
		}

	#leader-left {
		width: 748px;
		}
	
	#leader-right,
	#wallpaper,
	.ticker-heading,
	.ticker-date,
	.middle-160,
	#bottom-widget,
	.related-image,
	#social-box-vert,
	.breadcrumb,
	.home-right-category {
		display: none;
		}

	#top-nav,
	#main-nav,
	#inner-wrapper {
		width: 768px;
		}

	#main-nav ul {
		padding: 0 10px;
		width: 748px;
		}

	#main-nav ul li a {
		color: #fff;
		font: 700 16px/16px 'Open Sans Condensed', sans-serif;
		padding: 11px 14px;
		text-decoration: none;
		text-transform: uppercase;
		}

	#content {
		padding: 20px 10px;
		width: 748px;
		}

	#header,
	#footer-top,
	#footer-bottom {
		width: 748px;
		}

	#content-top {
		margin-bottom: 20px;
		width: 746px;
		}

	#ticker {
		max-width: 474px;
		}

	ul.ticker-list {
		max-width: 474px;
		}

	#content-social {
		width: 402px;
		}

	#main {
		width: 433px;
		}

	#main-home {
		width: 434px;
		}

	.full {
		width: 748px !important;
		}

	#post-area,
	#post-info {
		width: 420px;
		}

	#author-desc {
		width: 324px;
		}

	#related-posts {
		margin: 40px 0 0;
		}

	#related-posts ul,
	#related-posts ul li {
		display: block;
		}

	#related-posts ul li {
		margin: 5px 0;
		width: 100%;
		height: auto;
		}

	.related-small {
		display: block;
		}

	#home-left {
		margin-right: 0;
		padding-right: 13px;
		}

	#home-right {
		border-right: none;
		margin-left: 14px;
		padding-right: 0;
		width: 300px;
	    font: 400 12px/16px 'Open Sans', sans-serif;
		}

	.middle-side {
		display: block;
		}

	#social-box {
		width: 420px;
		display: inline;
		}

	.post-image {
		width: 206px;
		height: 230px;
		}

	.post-image img {
		width: 200px !important;
		height: 224px !important;
		}

	.archive-text {
		width: 298px;
		}

	#sidebar-home-wrapper {
		width: 314px;
		}

	.side-home {
		margin-left: 14px;
		}

	#footer-top-wrapper {
		padding: 20px 0;
		}

	#footer-top,
	#footer-bottom {
		padding: 10px;
		}

	#footer-nav1 ul li:last-child {
		border: 0;
		}

	#footer-nav2 ul li:first-child {
		padding-left: 0;
		}

	.nav-links {
		width: 400px;
		}

	}

@media screen and (max-width: 767px) and (min-width: 600px) {

	#top-menu {
		max-width: 429px;
		}

	#leader-wrapper {
		padding: 5px 0;
		}

	#leaderboard {
		padding: 0;
		width: 600px;
		height: auto;
		}
	
	#leader-right,
	#wallpaper,
	.ticker-heading,
	.middle-160,
	#bottom-widget,
	.side,
	.side-home,
	#social-box-vert,
	.related-image,
	.archive-image,
	.breadcrumb,
	.home-right-category,
	.facebook-share p,
	.twitter-share p,
	.pinterest-share p,
	.google-share p {
		display: none;
		}

	#leader-left,
	#top-nav,
	#main-nav,
	#inner-wrapper,
	#woo-content {
		width: 600px;
		}

	#main-nav ul {
		padding: 0 10px;
		width: 580px;
		}

	#main-nav ul li a {
		color: #fff;
		font: 700 14px/14px 'Open Sans Condensed', sans-serif;
		padding: 12px 9px;
		text-decoration: none;
		text-transform: uppercase;
		}
		
	#ticker {
		max-width: 306px;
		}

	ul.ticker-list {
		max-width: 306px;
		}

	#content {
		padding: 20px 10px;
		width: 580px;
		}

	#header,
	#footer-top,
	#footer-bottom {
		width: 580px;
		}

	#content-top {
		margin-bottom: 20px;
		width: 578px;
		}

	#post-info {
		width: 400px;
		}
		
	.facebook-share,
	.twitter-share,
	.pinterest-share,
	.google-share {
		margin: 0 5px 5px 0;
		width: 70px;
		}

	#content-social {
		width: 578px;
		}

	#main,
	#main-home {
		width: 420px;
		}

	.full {
		width: 580px !important;
		}

	#post-area {
		width: 400px;
		}

	#related-posts {
		margin: 40px 0 0;
		}

	#related-posts ul,
	#related-posts ul li {
		display: block;
		}

	#related-posts ul li {
		margin: 5px 0;
		width: 100%;
		height: auto;
		}

	.related-small {
		display: block;
		}

	#author-desc {
		width: 324px;
		}

	#social-box {
		width: 400px;
		display: inline;
		}

	.post-image {
		width: 206px;
		height: 230px;
		}
	.post-image img {
		width: 200px !important;
		height: 224px !important;
		}

	#home-left {
		border: 0;
		margin-right: 0;
		padding-right: 20px;
		width: 400px;
		}

	#home-right {
		border-right: none;
		padding-right: 0;
		}

	#featured-container,
	.category2,
	.carousel {
		width: 400px;
		}

	#featured-container,
	#featured-container img {
		height: 448px;
		}

	.featured-box {
		width: 340px;
		}

	ul.category3 li {
		width: 380px;
		}

	.middle-side {
		display: block;
		}

	#sidebar-wrapper,
	#sidebar-home-wrapper {
		width: 160px;
		}

	.side-home {
		margin-left: 0;
		}

	.tabber-text {
		width: 424px;
		}

	ul.category2 li {
		width: 190px;
		}

	.category2 img {
		width: 184px;
		height: 206px;
		}

	ul.headlines-info li {
		width: auto;
		}

	.category-links {
		width: 234px;
		}

	.category3-text {
		width: 278px;
		}

	.blog-text {
		width: 214px;
		}

	.archive-text {
		width: 380px;
		}

	#footer-top-wrapper {
		padding: 20px 0;
		}

	#footer-top,
	#footer-bottom {
		padding: 10px;
		}

	.footer-widget {
		padding: 20px;
		width: 540px;
		}

	#footer-nav1 ul li:last-child {
		border: 0;
		}

	#footer-nav2 ul li:first-child {
		padding-left: 0;
		}

	.nav-links {
		width: 380px;
		}
		
	.woocommerce-page div.product div.images,
	.woocommerce-page div.product div.summary {
		width: 48% !important;
		}
		
	.woocommerce-page div.product div.images {
		float: left !important;
		}
		
	.woocommerce-page div.product div.summary {
		float: right !important;
		}

	}

@media screen and (max-width: 599px) and (min-width: 480px) {

	#top-menu {
		max-width: 309px;
		}
		
	#top-nav ul li a {
		font: 700 8px/8px 'Open Sans', sans-serif;
		padding: 11px 12px;
		}

	#leader-wrapper {
		padding: 0;
		}

	#leaderboard {
		padding: 0;
		width: 480px;
		height: auto;
		}

	#main-nav {
		display: none;
		height: 0;
		margin: 0;
		padding: 0;
		}
	
	#wallpaper,
	#ticker,
	.middle-160,
	#bottom-widget,
	#sidebar-wrapper,
	#social-box-vert,
	.related-image,
	.archive-image,
	.side-home,
	.breadcrumb,
	.home-right-category,
	.facebook-share p,
	.twitter-share p,
	.pinterest-share p,
	.google-share p {
		display: none;
		}

	#nav-mobi,
	#nav-mobi ul {
		display: block;
		width: 480px;
		padding: 0;
		}

	.flip {
		margin-left: 10px;
		width: 470px;
		}

	#nav-mobi ul li {
		width: 216px;
		}

	#leader-left,
	#top-nav,
	#inner-wrapper,
	#main,
	#main-home {
		width: 480px;
		}

	#content {
		padding: 20px 10px;
		width: 460px;
		}

	#main-header-wrapper {
		padding-bottom: 10px;
		}

	#header,
	#footer-top,
	#footer-bottom {
		width: 460px;
		}

	#content-top {
		margin-bottom: 20px;
		width: 458px;
		}

	#content-social {
		float: left;
		width: 458px;
		}

	#content-social ul li:first-child {
		border-left: 0;
		}
		
	#content-social ul li:last-child {
		border-right: 1px solid #ccc;
		}

	#home-left {
		border: 0;
		margin-right: 0;
		padding: 0 20px;
		width: 420px;
		}

	#home-right {
		border-right: none;
		margin-left: 0;
		padding-right: 0;
		width: 420px;
		}

	#sidebar-home-wrapper {
		padding: 0 20px;
		width: 420px;
		}

	h2.category-heading {
		position: absolute;
			top: -5px;
			left: 15px;
		}

	.full {
		width: 420px !important;
		}

	#post-area {
		margin: 0 20px;
		width: 420px;
		}
		
	.facebook-share,
	.twitter-share,
	.pinterest-share,
	.google-share {
		margin: 0 5px 5px 0;
		width: 50px;
		}

	#author-desc {
		width: 324px;
		}

	#related-posts {
		margin: 40px 0 0;
		}

	#related-posts ul,
	#related-posts ul li {
		display: block;
		}

	#related-posts ul li {
		margin: 5px 0;
		width: 100%;
		height: auto;
		}

	.related-small {
		display: block;
		}

	#social-box,
	#post-info {
		width: 420px;
		display: inline;
		}

	.post-image {
		width: 206px;
		height: 230px;
		}

	.post-image img {
		width: 200px !important;
		height: 224px !important;
		}

	.archive-text {
		width: 400px;
		}

	#footer-top-wrapper {
		padding: 20px 0;
		}

	#footer-top,
	#footer-bottom {
		padding: 10px;
		}

	.footer-widget {
		padding: 10px;
		width: 440px;
		}

	#footer-nav1 ul li:last-child {
		border: 0;
		}

	#footer-nav2 ul li:first-child {
		padding-left: 0;
		}

	.nav-links {
		width: 400px;
		}
		
	.woocommerce-page div.product div.images,
	.woocommerce-page div.product div.summary {
		width: 48% !important;
		}
		
	.woocommerce-page div.product div.images {
		float: left !important;
		}
		
	.woocommerce-page div.product div.summary {
		float: right !important;
		}

	}

@media screen and (max-width: 479px) {

	#top-menu {
		max-width: 320px;
		}

	#top-nav ul li a {
		font: 700 8px/8px 'Open Sans', sans-serif;
		padding: 11px 12px;
		}
		
	#search-wrapper {
		border-top: 1px solid #ccc;
		width: 318px;
		}
		
	#searchform input {
		width: 308px;
		}
		
	#leader-wrapper {
		padding: 0;
		}

	#leaderboard {
		padding: 0;
		width: 320px;
		height: auto;
		}

	#main-nav {
		display: none;
		height: 0;
		margin: 0;
		padding: 0;
		}

	#wallpaper,
	#ticker,
	.middle-160,
	#bottom-widget,
	.category-image,
	.category3-image,
	#social-box-vert,
	.related-image,
	.archive-image,
	.breadcrumb,
	.blog-image,
	.home-right-category,
	.facebook-share p,
	.twitter-share p,
	.pinterest-share p,
	.google-share p {
		display: none;
		}

	#nav-mobi,
	#nav-mobi ul {
		display: block;
		padding: 0;
		width: 320px;
		}

	#nav-mobi select {
		width: 300px;
		}

	.flip {
		margin-left: 10px;
		width: 310px;
		}

	#nav-mobi ul li {
		width: 136px;
		}

	#leader-left,
	#top-nav,
	#inner-wrapper {
		width: 320px;
		}

	#content {
		padding: 20px 10px;
		width: 300px;
		}

	#main-header-wrapper {
		padding-bottom: 10px;
		text-align: center;
		}

	#header,
	#footer-top,
	#footer-bottom,
	#post-info {
		width: 300px;
		}

	#content-top {
		margin-bottom: 20px;
		width: 298px;
		}

	#content-social {
		float: left;
		width: 298px;
		}

	#content-social ul li {
		border-left: 0;
		border-right: 1px solid #ccc;
		}

	#main,
	#main-home {
		margin: 0;
		padding: 0;
		width: 300px;
		}

	.full {
		width: 300px !important;
		}

	#home-left {
		border: 0;
		margin-right: 0;
		padding-right: 0;
		width: 300px;
		}

	#home-right {
		border-right: none;
		margin-left: 0;
		padding-right: 0;
		width: 300px;
		}

	#featured-container,
	.category2,
	.carousel,
	#sidebar-home-wrapper {
		width: 300px;
		}

	.side-home {
		margin-left: 0;
		margin-top: 20px;
		}

	#featured-container,
	#featured-container img {
		height: 336px;
		}

	.featured-box {
		margin: 0 10px 10px;
		padding: 5px;
		width: 270px;
		}

	.featured-box h2 a {
		font: 700 28px/28px 'Open Sans Condensed', sans-serif !important;
		}

	.middle-mobile {
		display: inline;
		}

	ul.category2 li {
		width: 145px;
		}

	.category2 img {
		width: 139px;
		height: 156px;
		}

	.category-links {
		width: 300px;
		}

	ul.category3 li,
	.category3-text,
	.blog-text {
		width: 280px;
		}

	ul.headlines-info li {
		width: auto;
		}

	#post-area {
		margin: 0;
		width: 300px;
		}
		
	.facebook-share,
	.twitter-share,
	.pinterest-share,
	.google-share {
		margin: 0 5px 5px 0;
		width: 30px;
		}

	#author-desc {
		width: 204px;
		}

	#related-posts {
		margin: 40px 0 0;
		}

	#related-posts ul,
	#related-posts ul li {
		display: block;
		}

	#related-posts ul li {
		margin: 5px 0;
		width: 100%;
		height: auto;
		}

	.related-small {
		display: block;
		}

	.post-image {
		margin: 0 0 10px 0;
		width: 300px;
		height: 335px;
		}

	.post-image img {
		width: 294px !important;
		height: 329px !important;
		}

	#social-box {
		width: 300px;
		display: inline;
		}

	.archive-text {
		width: 280px;
		}

	#footer-top-wrapper {
		padding: 20px 0;
		}

	#footer-top,
	#footer-bottom {
		padding: 10px;
		}

	.footer-widget {
		padding: 10px 0;
		}

	#footer-nav1 ul li:last-child {
		border: 0;
		}

	#footer-nav2 ul li:first-child {
		padding-left: 0;
		}

	.nav-links {
		width: 280px;
		}
		
	.woocommerce table.shop_table td,
	.woocommerce-page table.shop_table td {
		padding: 6px !important;
		}

	}

Open in new window

0
Steve BinkCommented:
A few things you can change:

1) It looks like #topform was added to the template after the fact.  Move it to a proper location inside #header.

2) You have media breakpoints for varying screen sizes, but you're not actually using them to manipulate things like #logo.  That element drops to 597px for widths between 768 and 1002, but is 630px for all other sizes.  

3) Likewise for #topform - it is set to position:relative for 768-1002 widths, but position:absolute for all other sizes.  It needs to either adapt its size at all breakpoints, or have responsive positioning.

4) The sidebars (#sidebar-home-wrapper, #sidebar-home-wrapper > *) do not reposition/resize properly.

5) The images under "Current Articles" are actually scaling LARGER with smaller viewports.
1

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Bob StoneIT GuruAuthor Commented:
Thanks, good suggestions, just haven't had time to try any yet. I'll get back to you when I can.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Responsive Web

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.