fix mobile responsiveness issues

woops, this link should show both screenshots:
https://drive.google.com/folderview?id=0Bwn52qomJaSkSXdYVmlwSDBscTg&usp=sharing

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.

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.

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.

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.

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

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

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 https://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 https://goldlionstyle.com/date-night/ and https://goldlionstyle.com/contact/

Would you know how to fix this?

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!