Need help? Check out our Support site, then


@media rules assistance please for customised Expound theme

  1. souldestructionblog
    Member

    Hi there, I have made some CSS customisations (blog is Expound theme) but on smaller mobile devices like an iPhone in portrait mode, the main site doesn't align underneath the menu. Is there an @media code I can add to fix this please. Also the widgets are veering to right even though I have copied some @media rules from this forum and applied them to the #secondary area, it doesn't seem to be working. My @media codes I have in place already are below. Thanks so much.

    @media screen and (max-width:965px) {
    	#secondary {
    		float: left;
    		width: inherit;
    
    }
    
    	.site-main .widget-area {
    		clear: none;
    	}
    
    	.widget-area .widget li:last-child {
    		border-bottom: none;
    		margin-bottom: -10%;
    	}
    
    	.featured-content .post {
    		float: left;
    		width: inherit;
    	}
    
    	.featured-content-secondary .post {
    		float: left;
    		width: inherit;
    	}
    
    	#primary {
    		float: left;
    		width: inherit;
    	}
    
    	#main {
    		width: inherit;
    		float: left;
    	}
    
    	.post {
    		width: ;
    		float: left;
    }
    	#page {
    		width: inherit;
    	}
    
    	.site-content article {
    		padding-right: 15px;
    		padding-left: 15px;
    	}
    }
    
    @media screen and (max-width:1024px) {
    	.featured-content .post {
    		float: left;
    		width: inherit;
    	}
    
    	.featured-content-secondary .post {
    		float: left;
    		width: inherit;
    	}
    }

    The blog I need help with is ruthjacobs.co.uk.

  2. souldestructionblog
    Member

    Although I have managed to centre the widgets, I still have the issue with the main site not aligning under the menu and header. I am wondering if a better fix would be to widen the header/menu, but when I have added % to increase the width on the @media code it doesn't work as it comes out different on various devices (using the responsinator). My updated code is below. Many thanks

    @media screen and (max-width:965px) {
    	#secondary {
    		float: left;
    		width: 100%;
    	}
    
    	.site-main .widget-area {
    		clear: none;
    	}
    
    	.widget-area .widget li:last-child {
    		border-bottom: none;
    		margin-bottom: -10%;
    	}
    
    	.featured-content .post {
    		float: left;
    		width: inherit;
    	}
    
    	.featured-content-secondary .post {
    		float: left;
    		width: inherit;
    	}
    
    	#primary {
    		width: 100%;
    	}
    
    	#page {
    		float: left;
    	}
    
    	.site-content article {
    		padding-right: 15px;
    		padding-left: 15px;
    	}
    }
    
    }
    
    @media screen and (max-width:1024px) {
    	.featured-content .post {
    		float: left;
    		width: inherit;
    	}
    
    	.featured-content-secondary .post {
    		float: left;
    		width: inherit;
    	}
    
    	.featured-content-secondary {
    		float: left;
    		width: inherit;
    	}
    }
  3. souldestructionblog
    Member

    Seven hours of not giving up and seems I've come up with a solution.

    @media screen and (max-width:965px) {
    	#secondary {
    		float: left;
    		width: 100%;
    	}
    
    	.site-main .widget-area {
    		clear: none;
    	}
    
    	.widget-area .widget li:last-child {
    		border-bottom: none;
    		margin-bottom: -10%;
    	}
    
    	.featured-content .post {
    
    	}
    
    	#primary {
    		width: 100%;
    	}
    
    	.site-header {
    	width: 100%
    
     }
      #main {
    		border: none;
    		-moz-box-shadow: none;
    		box-shadow: none;
    		-webkit-box-shadow: none;
    		padding-bottom: 0;
    	width: 100%
    			padding-left: 0;
    }
    
    	.site-content article {
    		padding-right: 15px;
    		padding-left: 15px;
    	}
    }
    
    }
    
    @media screen and (max-width:1024px) {
    
    		.featured-content-secondary .post {
    		width: 96%;
    	}
    
    	.featured-content-secondary {
    			width: 96%;
    	}
    }
  4. Nice and your perseverance paid off, your site is looking awesome!

  5. souldestructionblog
    Member

    Thank you so much!

  6. You are welcome.

  7. souldestructionblog
    Member

    Could I ask another question please about CSS coding as I have an issue with my main navigation bar - it highlights every sub-category under a parent menu item when a blog post is categorised under more than one main menu parent category. This post is an example of the issue http://ruthjacobs.co.uk/2014/01/11/rt-hon-mrs-theresa-may-mp-make-the-merseyside-hate-crime-model-of-policing-prostitution-law-uk-wide/ as only some of the sub-menu items under 'Human Rights' should be highlighted maroon, but instead they all are. Many thanks

  8. souldestructionblog
    Member

    It might be even more complicated because if there are three main menu items a blog post is categorised under then two on the main menu are highlighted but one isn't. This post is an example http://ruthjacobs.co.uk/2013/07/21/sex-trafficking-survivor-chong-kim-meets-me-in-london-to-talk-about-eden-the-newly-released-film-based-on-her-life/ and it shouldn't be highlighting 'writer interviews' but it is (under the 'creatives' menu item) and it isn't highlighting 'human rights' on the main menu although it is highlighting the sub-category under there for 'human trafficking awareness' which it is meant to. Thanks so much!

  9. souldestructionblog
    Member

    This is the code I have relating to the menu colours:

    .navigation-main li:hover > a {
    	background: maroon;
    	color: white !important;
    }
    
    .navigation-main ul > .current_page_item ~ .current_page_item a, .navigation-main ul > .current-menu-item ~ .current-menu-item a, .navigation-main ul > .current-post-ancestor ~ .current-post-ancestor a, .navigation-main ul > .current-menu-parent ~ .current-menu-parent a, .navigation-main ul > .current-post-parent ~ .current-post-parent a {
    	background: maroon;
    	color: white !important;
    }
    
    .navigation-main ul > .current-post-ancestor ~ .current-post-ancestor a:hover, .navigation-main ul > .current-menu-parent ~ .current-menu-parent a:hover, .navigation-main ul > .current-post-parent ~ .current-post-parent a:hover {
    	background: maroon;
    	color: white !important;
    }
    
    .navigation-main ul > .current_page_item, .navigation-main ul > .current-menu-item, .navigation-main ul > .current-post-ancestor, .navigation-main ul > .current-menu-ancestor, .navigation-main ul > .current-menu-parent, .navigation-main ul > .current-post-parent, button, input[type="button"], input[type="reset"], input[type="submit"], .button-primary, a.button-primary, a.button-primary:visited, .wpm-button-primary, a.wpm-button-primary {
    	background-color: maroon!important;
    }
  10. If I click on Human Rights Awareness under Human Rights, Human Rights and Human Rights Awareness are both highlighted as they should be.

    If I then click on a post in Human Rights Awareness, such as Ruth Jacobs speaks..., Human Rights is no longer highlighted, but Decriminalization and Human Trafficking are. If you look at the source code for the top level menu item, Human Rights, when you are on the Ruth Jacobs speaks... post, you do not see any classes assigned to that menu item which would allow you to keep it highlighted.

    <li id="menu-item-6797" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-6797">

    In other words, I don't think the theme has the coding to allow tracking of category menu items depending on which post you are on, and in many cases this may not be wanted, such as when many categories that are top level menu items are assigned to a single post. It could get quite confusing.

    When a post is a menu item under a category, then the chain works, and everything back to the top level category is highlighted. I hope I haven't confused things even further.

  11. souldestructionblog
    Member

    Thank you so much, that makes sense and I am okay with the main menu items working to highlight or not in that way, but I would really like to be able to stop the highlighting of submenu items when a post is not categorised under those submenu categories that are highlighted please? For example, stopping every submenu category item being highlighted under 'Human Rights' on the post below, as all six are highlighted and only three should be http://ruthjacobs.co.uk/2014/01/11/rt-hon-mrs-theresa-may-mp-make-the-merseyside-hate-crime-model-of-policing-prostitution-law-uk-wide/ Thanks again.

  12. You know, I can't figure this out for anything. I'll pass this by @designsimply and see if she can figure it out. Hang in there.

  13. I would really like to be able to stop the highlighting of submenu items when a post is not categorised under those submenu categories that are highlighted please?

    Give this a try… find this in your custom CSS:

    .navigation-main ul > .current_page_item ~ .current_page_item a, .navigation-main ul > .current-menu-item ~ .current-menu-item a, .navigation-main ul > .current-post-ancestor ~ .current-post-ancestor a, .navigation-main ul > .current-menu-parent ~ .current-menu-parent a, .navigation-main ul > .current-post-parent ~ .current-post-parent a {
    	background: maroon;
    	color:#fff !important
    }

    And replace it with this (same thing except with the "~" characters removed):

    .navigation-main ul > .current_page_item .current_page_item a, .navigation-main ul > .current-menu-item a, .navigation-main ul > .current-post-ancestor a, .navigation-main ul > .current-menu-parent a, .navigation-main ul > .current-post-parent .current-post-parent a {
    	background: maroon;
    	color:#fff !important
    }

    Aside from that, it looks like there are quite a few overlapping CSS rules in your custom CSS that are making editing a bit difficult. I also think you are overusing "!important" and that is probably causing some problems.

    If you're still having trouble after trying out the example above, you might consider removing all of your current menu color related CSS (all of it) and start over with that part. If you want to give that a try, go ahead and remove the color CSS and reply here to say you want help redoing it and we'll give you a hand.

  14. souldestructionblog
    Member

    thank you very much - it worked. I should try to remove some 'importants' too. Thanks again.

  15. Kudos to @designsimply! Thanks a bunch for the help.

  16. souldestructionblog
    Member

    Many thanks for that but I've realised a problem still exists. When on a post that is categorised under two main menu item headings the second category is highlighted a paler gray - not the same maroon color as the other main menu item, and also the same pale gray is in the submenu, not the dark gray it should be. Please could you advise on this. Also when that's sorted, if you can help with the messy code you mentioned that would be great too. Many thanks

    This is one post where the issue can be seen - http://ruthjacobs.co.uk/2014/01/11/rt-hon-mrs-theresa-may-mp-make-the-merseyside-hate-crime-model-of-policing-prostitution-law-uk-wide/

  17. souldestructionblog
    Member

    I've also noticed another issue with the pale gray showing current categories in submenus when more than one category is applied to a post.

    This is an example: http://ruthjacobs.co.uk/2014/01/10/bbc1-inside-out-documentary-investigating-policing-prostitution-in-the-south-east/

    Thanks again

  18. souldestructionblog
    Member

    Just to let you know I've taken the code off that makes it pale gray as the maroon is still wrong but doesn't look as bad as the pale gray. Thanks

  19. When on a post that is categorised under two main menu item headings the second category is highlighted a paler gray - not the same maroon color as the other main menu item, and also the same pale gray is in the submenu, not the dark gray it should be.

    Just to let you know I've taken the code off that makes it pale gray as the maroon is still wrong but doesn't look as bad as the pale gray.

    Since you changed it, I can't really see what you were referring to. If you want to change it back and leave it for a bit, I will take a look. If not, no worries and leave the maroon.

  20. souldestructionblog
    Member

    Thank you. I've changed it back so you can see the paler gray issues.

  21. Great. It's also very helpful that you've been including specific links!

    Looking at this post:
    http://ruthjacobs.co.uk/2014/01/11/rt-hon-mrs-theresa-may-mp-make-the-merseyside-hate-crime-model-of-policing-prostitution-law-uk-wide/

    The following set of selectors from the theme's original CSS are matching "Human Rights" for that post as well as the light gray menu items in that submenu: "Discrimination of Prostitution," "Human Trafficking Awareness," and "Online Safety."

    .navigation-main ul > .current-post-ancestor ~ .current-post-ancestor a, .navigation-main ul > .current-menu-parent ~ .current-menu-parent a, .navigation-main ul > .current-post-parent ~ .current-post-parent a

    Here's the complete rule:

    .navigation-main ul > .current_page_item ~ .current_page_item a,
    .navigation-main ul > .current-menu-item ~ .current-menu-item a,
    .navigation-main ul > .current-post-ancestor ~ .current-post-ancestor a,
    .navigation-main ul > .current-menu-parent ~ .current-menu-parent a,
    .navigation-main ul > .current-post-parent ~ .current-post-parent a {
    	background: #3a3a3a;
    }

    It looks like you copied that rule into your CSS earlier and changed the color to maroon and also added "!important"

    .navigation-main ul > .current_page_item ~ .current_page_item a, .navigation-main ul > .current-menu-item ~ .current-menu-item a, .navigation-main ul > .current-post-ancestor ~ .current-post-ancestor a, .navigation-main ul > .current-menu-parent ~ .current-menu-parent a, .navigation-main ul > .current-post-parent ~ .current-post-parent a {
    	background: maroon;
    	color:#fff !important
    }

    Then I proposed you change it to take out the tilde characters because that rule was causing all the menu items under "Human Rights" to be maroon for that post and you didn't want that.

    When you made the change to take out the tilde characters, then the match for the four menu items we're talking about (Human Rights, Discrimination of Prostitution, Human Trafficking Awareness, Online Safety) fell back to the light gray color (#3a3a3a) for that rule from the original theme CSS.

    So, if you want to turn those that lighter gray color to dark gray, you need the rule with the tilde, BUT! you need to put it in the right order if you also want to add another rule after it that changes some of the other matched menu items to maroon. I hope I'm doing this a little justice because it's a bit hard to explain with so many conflicting rules in your custom CSS! :)

    So, to turn the light gray (#3a3a3a) menu items on on this post http://ruthjacobs.co.uk/2014/01/11/rt-hon-mrs-theresa-may-mp-make-the-merseyside-hate-crime-model-of-policing-prostitution-law-uk-wide/ to the darker gray (#2a2a2a) like the other top level menu items are currently, you can add this rule:

    .navigation-main ul > .current-post-ancestor ~ .current-post-ancestor a, .navigation-main ul > .current-menu-parent ~ .current-menu-parent a, .navigation-main ul > .current-post-parent ~ .current-post-parent a {
    	background: #2a2a2a;
    }

    But it MUST be added before this rule from your current custom CSS:

    .navigation-main ul > .current_page_item .current_page_item a, .navigation-main ul > .current-menu-item a, .navigation-main ul > .current-post-ancestor a, .navigation-main ul > .current-menu-parent a, .navigation-main ul > .current-post-parent .current-post-parent a {
    	background: maroon;
    	color:#fff !important
    }

    Because if it's added after that rule then it will be more specific and the dark gray will override the maroon for all the items under "Human Rights."

    The order in which CSS items are added matters a lot. If there are two rules that match the same element, the latest rule listed gets used. This is called specificity in CSS, and it's hard to get a handle on it if you're using complex CSS rules (and using a lot of !important rules can really make things confusing if you're not very careful with them).

    If you want to learn more about specificity, you might like these links, especially if you're a Star Wars fan. :)
    http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
    http://htmldog.com/guides/css/intermediate/specificity/

  22. souldestructionblog
    Member

    Thank you, but it still isn't working properly. Human Rights isn't highlighted on the main menu on the post we referred to earlier and also now on other posts all submenu items are highlighted when they shouldn't be. This post is an example http://ruthjacobs.co.uk/2014/01/15/lori-adorable-sex-worker-and-sex-worker-rights-advocate-interview/

    Thank you

  23. souldestructionblog
    Member

    It's also the same with pages too. So all submenu items are highlighted when only one should be. For example on this page every submenu item is highlighted when it should only be the first on the main menu http://ruthjacobs.co.uk/about-ruth-jacobs/ and others such as http://ruthjacobs.co.uk/sites-i-like/ and http://ruthjacobs.co.uk/useful-links/ and http://ruthjacobs.co.uk/external-sites/ . Thanks

  24. souldestructionblog
    Member

    I've fixed the aforementioned issues but I am still left with every submenu item hightlighted when a post is in two or more categories that are also main menu items. This post is an example http://ruthjacobs.co.uk/2014/01/11/rt-hon-mrs-theresa-may-mp-make-the-merseyside-hate-crime-model-of-policing-prostitution-law-uk-wide/ and http://ruthjacobs.co.uk/2013/07/30/michelle-morgan-an-artist-and-a-survivor-of-prostitution-meets-me-to-share-about-her-art-and-her-life-after-one-month-out-of-the-sex-trade/ Many thanks

  25. souldestructionblog
    Member

    Just to let you know as a temporary measure I have changed the video main menu category to a link instead which stops all submenu itms being highlighted under other parent categories when a post falls under two categories. If this can be resolved so I can use the category 'videos' instead of the link on the main menu, then I would greatly appreciate that. So you have the code it's posted below. Thanks again

    .navigation-main li:hover > a {
    	background: maroon;
    	color: white;
    }
    
    .navigation-main ul > .current-post-ancestor ~ .current-post-ancestor a, .navigation-main ul > .current-menu-parent ~ .current-menu-parent a, .navigation-main ul > .current-post-parent ~ .current-post-parent a {
    	background: #212121;
    }
    
    .navigation-main ul > .current-post-parent ~ .current-post-parent a, .navigation-main ul > .current-menu-parent .current-menu-parent a, .navigation-main ul > .current-post-parent .current-post-parent a, .navigation-main ul > .current_page_item .current_page_item a, .navigation-main ul > .current-post-parent .current-post-parent a {
    	background: maroon;
    	color: #fff;
    }
    }
    
    .navigation-main ul > .current-post-ancestor ~ .current-post-ancestor a:hover, .navigation-main ul > .current-menu-parent ~ .current-menu-parent a:hover, .navigation-main ul > .current-post-parent ~ .current-post-parent a:hover {
    	background: maroon;
    	color: white;
    }
    
    .main-small-navigation ul > .current_page_item, .main-small-navigation ul > .current-menu-item {
    	background: maroon;
    }
    
    .navigation-main ul > .current_page_item, .navigation-main ul > .current-menu-item, .navigation-main ul > .current-post-ancestor, .navigation-main ul > .current-menu-ancestor, .navigation-main ul > .current-menu-parent, .navigation-main ul > .current-post-parent, button, input[type="button"], input[type="reset"], input[type="submit"], .button-primary, a.button-primary, a.button-primary:visited, .wpm-button-primary, a.wpm-button-primary {
    	background-color: maroon !important;
    }
  26. Let's look at one thing at a time. Please switch the Videos menu item back to a category and make NO other changes to the CSS and then let's examine this post so I can make sure I'm clear about the problem:
    http://ruthjacobs.co.uk/2014/01/11/rt-hon-mrs-theresa-may-mp-make-the-merseyside-hate-crime-model-of-policing-prostitution-law-uk-wide/

  27. souldestructionblog
    Member

    Thank you, but I hate my site looking messy with all those submenu items highlighted when they shouldn't be. Is there another way to work this out please?

  28. I'm sorry but I can't see the problem clearly to work on it unless it's visible on your site.

    There are a couple options though. One is that I can continue to try to explain based on theory and based on the information you have provided.

    I really think the CSS rules are working as expected and the problem is that you're getting confused by having so many different rules for similar things that overlap. So, a 2nd option could be to remove all of the menu-related custom CSS and start over with that part. You should be able to do that in the preview section without leaving your site looking messy for viewers on the front end. If you want to take this direction, I can help but we'd have to step back and also I would assume a blank slate with the CSS.

    Another option, if you would like, would be to hire a designer to spend some more in-depth time on the issue. There is an inquiry form at http://en.support.wordpress.com/customize-my-site/request-theme-customization/ if you're interested in that.

    As staff for WordPress.com, we are not here to provide design consultation but we do are best and care very much about giving CSS support when we can. We can offer direction, but not in-depth design work. Once we start spending a great deal of time on one issue, it becomes more of a question of design consultation and not really about the CSS tools that we support or providing basic CSS education and direction.

  29. I'll try some of option two :) which is to try to explain some of the past issues you posted about based on the information you have provided.

    Thank you, but it still isn't working properly. Human Rights isn't highlighted on the main menu on the post we referred to earlier and also now on other posts all submenu items are highlighted when they shouldn't be. This post is an example http://ruthjacobs.co.uk/2014/01/15/lori-adorable-sex-worker-and-sex-worker-rights-advocate-interview/

    On this post http://ruthjacobs.co.uk/2014/01/15/lori-adorable-sex-worker-and-sex-worker-rights-advocate-interview/ if I apply the CSS from your example at https://mc.a8c.com/happiness/tqr/?topic_id=369244#post_1606541 in a preview then the Human Rights main menu is highlighted as expected.

    If you added that sample CSS and also updated the menu so the Video is a category video item, it looks to me like the Human Rights submenu items would continue to look like it does right now (screenshot).

  30. It's also the same with pages too. So all submenu items are highlighted when only one should be. For example on this page every submenu item is highlighted when it should only be the first on the main menu http://ruthjacobs.co.uk/about-ruth-jacobs/ and others such as http://ruthjacobs.co.uk/sites-i-like/ and http://ruthjacobs.co.uk/useful-links/ and http://ruthjacobs.co.uk/external-sites/

    To test this, I opened each page and previewed using the CSS you provided at https://mc.a8c.com/happiness/tqr/?topic_id=369244#post_1606541

    In my tests, only the expected submenu items were highlighted. None of the menus had all of the submenu items highlighted.

Topic Closed

This topic has been closed to new replies.

About this Topic