• Resolved tristanblair2

    (@tristanblair2)


    I’m having some mobile responsiveness issues that I’m hoping to get help with. The website is goldlionstyle.com and here are some screenshots for how it’s appearing on my android device: https://drive.google.com/file/d/0Bwn52qomJaSkMklXZG1YWG5JZzA/view?usp=sharing

    As you can see, the menu is not appearing as wide as the screen, and also the images are slightly cut off to the right (yet it doesn’t let you scroll horizontally). I’ve tried configuring my viewport by changing the meta viewport tag to this:

    function omega_meta_viewport() {
    echo ‘<meta name=”viewport” content=”width=device-width, initial-scale=1″/>’ . “\n”;
    }

    (All I changed from the original function was adding the ‘initial-scale=1’). Any ideas on what else could be causing this error?

    Thanks in advance for any help offered!

Viewing 13 replies - 1 through 13 (of 13 total)
  • Thread Starter tristanblair2

    (@tristanblair2)

    Hi tristanblair2,
    below stylesheet override omega style.

    /themes/blair/style.css line 86

    .content {
        float: left;
        width: 650px;
    }

    Try to remove and see if that fix your issue. Create a child theme is recommended if you want to customize Omega theme. You can also override Omega style via “Appearance > Customize > CSS”. This should be enough in your case.

    Hope that helps.

    Thread Starter tristanblair2

    (@tristanblair2)

    Hi themehall,
    Thanks for the advice. I’m using a child theme and I set the content width to 650px because I wanted it to be wider than the omega default (600px). If I remove that code, will it shrink back to the default 600px width?

    Yes. If that’s the case, you need to copy Media Queries part from Omega style.css. It is missing from your current child theme style.css.

    If you use blair as child theme, you don’t need to load omega style.css. Just copy the omega/style.css into your child theme and customize it accordingly.

    Use one style.css will improve your site performance as well.

    Thread Starter tristanblair2

    (@tristanblair2)

    Wonderful! I added the media queries and it fixed my problem. Thank you so much!
    This is my first child theme to create, and I was under the impression that I only needed to add the specific css elements in my child theme style.css that I wanted to change, and everything else would be pulled from the parent theme style.css.
    Are you saying that if I copy every item from omega style.css into my child theme style.css, this would prevent my site from loading the omega style.css altogether? I was actually trying to improve my site performance so I would love to know how to make it only use my child style.css

    Copy omega style.css doesn’t automatically unload the style.

    Please check your child theme functions.php and check if there is code to enqueue omega style. You can also try to remove blair/functions.php completely.

    Thread Starter tristanblair2

    (@tristanblair2)

    My child theme functions file says this

    <?php
    add_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_styles’ );
    function enqueue_parent_styles() {
    wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’/style.css’ );
    }
    ?>

    but I thought that creating this functions file was part of creating my child theme initially because it informed the theme to use omega’s scripts, etc.

    This may be a beginner question but I was under the impression that my theme wouldn’t work properly if I didn’t have this functions file in my child theme…

    You can safely remove the code from functions.php. If that’s the only code in functions.php, you can remove the file. Style.css is the only required file. You can add functions.php if you want to add custom php code.

    Thread Starter tristanblair2

    (@tristanblair2)

    Sorry for the delay! So if I remove my child theme functions file, do I first need to make sure that all of the elements in the Omega style.css are also included in my child style.css (including those that I didn’t make changes to)?

    Because currently the only elements I have in my child style.css are those that I wanted to change from the parent theme.

    That true. That way you don’t have to load the media query stylesheet twice.

    Anyway, enqueue the parent style like what you are doing now is not a bad idea either. Adding another css file won’t hurt your site. So if you feel more comfortable with your current approach, just make sure that your custom CSS won’t override the responsive part or Omega

    Thread Starter tristanblair2

    (@tristanblair2)

    Thank you so much for the help! I really appreciate it!

    Thread Starter tristanblair2

    (@tristanblair2)

    So I thought that adding the media queries had fixed everything but while clicking through I realized that just a few specific pages are still not being mobile responsive.

    On my ipad, my ‘Shop’ page is not responsive. It’s using a custom page template so I’m guessing that my css for that page is somehow overriding the media queries? The url is http://goldlionstyle.com/shop/ and the css selector I use for that page template is
    #content.shop-wide {
    width: 850px;
    float: none;
    margin: 0 auto;
    }

    Also on my mobile, neither the pages nor single posts are responsive. Same story as above, these have a custom template that uses the css
    #content.no-sidebar {
    width: 700px;
    float: none;
    margin: 0 auto;
    }
    Example urls are http://goldlionstyle.com/date-night/ and http://goldlionstyle.com/contact/

    Would you know how to fix this?

    Thread Starter tristanblair2

    (@tristanblair2)

    ok, never mind 🙂 I went ahead and added those css selectors under my media queries and fixed the problem. Should have tried that before I posted!

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘fix mobile responsiveness issues’ is closed to new replies.