@media rules assistance please for customised Expound theme

  • Author
    Posts
  • #1582007

    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.

    #1582198

    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;
    	}
    }
    #1582228

    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%;
    	}
    }
    #1582311

    Nice and your perseverance paid off, your site is looking awesome!

    #1582329

    Thank you so much!

    #1582330

    You are welcome.

    #1582331

    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

    #1582332

    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!

    #1582333

    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;
    }
    #1582334

    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.

    #1582335

    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.

    #1582336

    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.

    #1582337

    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.

    #1582338

    thank you very much – it worked. I should try to remove some ‘importants’ too. Thanks again.

    #1582339

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

    #1582340

    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/

    #1582341

    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

    #1582342

    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

    #1582343

    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.

    #1582347

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

The topic ‘@media rules assistance please for customised Expound theme’ is closed to new replies.