Twenty Twelve Theme not showing correctly in mobile

  • A friend just got done with our site https://www.SacramentoTattooShops.com and I cannot figure out how to make the site responsive in mobile. Can anyone help me with this? From a desktop everything looks spectacular, In mobile my top and bottom Menu bar is gone and all of my body text is shifted to the left. Really confusing but I know somebody here can figure this one out.

Viewing 11 replies - 1 through 11 (of 11 total)

  • What theme are you using? Where did you download it from?

    any element with a fixed width CSS is likely to break a responsive layout;

    for example, in your site, the style of .head_bg has a fixed width of 1000px.

    Thread Starter stylzclothing

    (@stylzclothing)

    Esmi- We are using Twenty Twelve Theme WP

    Alchymyth. my header is as follows:

    <?php

/**

 * The Header template for our theme

 *

 * Displays all of the <head> section and everything up till <div id="main">

 *

 * @package WordPress

 * @subpackage Twenty_Twelve

 * @since Twenty Twelve 1.0

 */

?><!DOCTYPE html>

<!--[if IE 7]>

<html class="ie ie7" <?php language_attributes(); ?>>

<![endif]-->

<!--[if IE 8]>

<html class="ie ie8" <?php language_attributes(); ?>>

<![endif]-->

<!--[if !(IE 7) | !(IE 8)  ]><!-->

<html <?php language_attributes(); ?>>

<!--<![endif]-->

<head>

<meta charset="<?php bloginfo( 'charset' ); ?>" />

<meta name="viewport" content="width=device-width" />

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

<link rel="profile" href="https://gmpg.org/xfn/11" />

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

<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>

<!--[if lt IE 9]>

<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>

<![endif]-->

<?php wp_head(); ?>

<script type="text/javascript">
jQuery.noConflict();
</script>

</head>

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

<div id="page" class="hfeed site">

	<header id="masthead" class="site-header" role="banner">

    <div class="head_bg">

    <div class="main_header">

    <div class="main_header_left"><a>"><img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"/></a></div>

    <div class="main_header_right">

    <div class="head_right_top">Follow Us : <a href="https://www.facebook.com/StylzTattoos"><img src="<?php echo get_template_directory_uri(); ?>/images/f1.png"/></a> <a href="https://twitter.com/STYLZPIERCINGS"><img src="<?php echo get_template_directory_uri(); ?>/images/t1.png"/></a> <a href="https://instagram.com/stylztattoos"><img src="<?php echo get_template_directory_uri(); ?>/images/v1.png"/></a></div>

    <div class="head_right_middle">

    <div class="middle_head_left">Walk-ins Welcome | Appointments call or email</div>

    <div class="middle_head_right">

    <div class="ph_number">916-284-8091</div>

    <div class="email"><a href="mailto:[email protected]">[email protected]</a></div>

    </div>

    </div>

    <div class="head_right_right">

<ul>
<li><a href="?page_id=28">Artwork</a></li>
<li><a href="mailto:[email protected]">Upload Your Picture</a></li>
<li><a href="?page_id=34">Request a quote</a></li>
<li><a href="?page_id=703">FAQ</a></li>
</ul>
    </div>

    </div>    

    </div>

        </div>

        <nav id="site-navigation" class="main-navigation" role="navigation">

			<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>

			<a href="#content">"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>

			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

		</nav><!-- #site-navigation -->       

	</header><!-- #masthead -->

    <?php if(is_home() || is_front_page()) { ?>

    <div class="header_banner">

    <div class="banner_head"><?php if (function_exists('get_thethe_image_slider')) {	print get_thethe_image_slider('Slider1');}?></div>

    <div class="followus">

    <div class="follow_icon"><img src="<?php echo get_template_directory_uri(); ?>/images/followus.png"/></div>

    <div class="post_tattoo">Post your Tattoo or Piercing Picture and tag us to receive a DISCOUNT on your next purchase!!!</div>

    <div class="click_link"><a href="?page_id=13"><img src="<?php echo get_template_directory_uri(); ?>/images/click.png"/></a></div>

    </div>

    </div>
<?php } ?>

	<div id="main" class="wrapper">

    [Moderator Note: Please post code & markup between backticks or use the code button. Your posted code may now have been permanently damaged by the forum’s parser.]

    Thread Starter stylzclothing

    (@stylzclothing)

    alchymyth

    So my question i guess is what do i change so it looks right on mobile?

    Twenty Twelve was designed for mobiles from the ground up. You should not be editing the theme itself but using a child theme for your changes or a custom CSS plugin.

    Thread Starter stylzclothing

    (@stylzclothing)

    Esmi,

    Please look at our site on Desktop and then mobile. Do you see in the mobile my top and bottom Menu bar are gone and all of my body text is shifted to the left in the body. What do you think that could be?

    Your are not using the original 2012 theme. It is your changes that have effectively “broken” the theme for mobiles.

    Thread Starter stylzclothing

    (@stylzclothing)

    Esmi,

    So am I just “Out of Luck” for this to be corrected?

    You’re not out of luck, but whoever designed your site did a poor job. Your best bet would be to download a fresh copy of the Twenty Twelve theme, create a child theme as esmi suggested, and then ask your designer to redo the site so the mobile version works correctly.

    Thread Starter stylzclothing

    (@stylzclothing)

    @stephencottontail

    Wow. Thats not what I wanted to hear at all. :/ I cant do that.

    I’m sorry but there’s not a lot we can do. This potential level of coding and/or CSS changes needed is really beyond the scope of the support we are able to provide in the forum.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Twenty Twelve Theme not showing correctly in mobile’ is closed to new replies.