That makes sense but how would I implement that into portfolio items, please?

I’m still hoping ot hear from you soon, but wanted to let you know that I’ve moved the video to another page, so please refer to this one instead; same problem on mobile persists…

video won’t start on mobile

That makes sense! Thanks so much :)

One more comment! Sorry to be a pest :)

This is how the client wants it to look but the excerpt text is also displaying an alpha of 0.8 and they want it to be 100% white. Is there a CSS trick even though the excerpt is within the grid-content?

Portfolio test

I got the transparency to work under the title with –

background-color: rgba(29,29,29,0.0);

So all I need is to know is how to place the .grid-content over the image as opposed to underneath, please :)

Ok, that worked well but 2 more parts to this, please –

In the link in the private area, I need to make the background transparent under the title plus that alternating colours need to be 0.7 transparent. Thanks so much!

That worked! Thanks so much, Yigit! :)

Oh, I just realised that the order is reversed because I have the li floating right but the issue is still that the icons are wrong for Linkedin and Instagram.

Sure! I currently have an alpha of 0.9 as the background when the mobile menu opens but what would be ideal is to show the logo at the top or bottom, or logo at top and another picture below the menu. If you look at my child css you’ll see that I’ve commented out the overflow for now as the site is live. Thanks!

http://anhandchi.com/

Here’s all of the css for the open mobile menu –

	/* styling menu when open */
	
	/* .boxed #wrap_all {
		overflow: visible !important;
	}
	
	ul#mobile-advanced {
	  overflow-x: visible !important;
	} */
	
	#top .av_header_glassy.av_header_transparency .header_bg {
		opacity: 0;
	}
	
	.responsive #top .av_header_transparency #header_meta {
		border-color: #004a5a;
	}
	
	.show_mobile_menu #mobile-advanced {
		min-height: 1500px!important;
		padding-top: 0px;
		padding-bottom: 0px;
		margin-top: 0px;s
		border: 0px solid #fff;
		border-left: 0px solid #004a5a;
		/* background: #004a5a; */
		background-color: rgba(0, 74, 90, 0.9);
		/* background: url("images/mobileBg.png") !important; */
	}
	
	#mobile-advanced a {
		color: #fff;
		border-bottom-width: 0px;
		text-align: center;
	}
	
	#mobile-advanced li > a:before,
	.html_header_mobile_behavior #mobile-advanced span > a:before,
	#mobile-advanced .mega_menu_title:before {
		content: "" !important;
		}
			
	.show_mobile_menu #advanced_menu_hide {
		border: 0px solid #fff;
		/* top: 95%; */
	}

Sorry for the delayed reply – I thought I hit submit. I do have that code in my child theme’s css so it’s odd that it’s not picking that up there and only seeing it in the quick css – any ideas? Thanks :)

I tried that and it didn’t make a change, so I tried 20px and it’s still not moving over.

Ok, that’s working nicely now; I made a few changes that I’d like to share so that others can benefit –

/* mobile to tablet portrait - default 767 does not include tablet landscape */
@media only screen and (max-width: 767px) {
	/* start */

	/* social */
	.responsive #top #header_meta .social_bookmarks li a {
		margin-top: 40px;
	}
	
	
	/* this centers the logo and places the toggle under */
	.responsive .logo a, .responsive .logo {
	    width: 100%!important;
	}
	.responsive .logo img {
	margin: auto;
	max-height: 140px;
	margin-top: 40px;
	margin-bottom: 0px;
	}
	
	.header_color img {
	padding-top: 0;
	}
	#header {
	    height: 420px!important;
	}
	
	#advanced_menu_toggle {
	    top: 140%;
	    right: 43%;
	}
	/* end centers the logo and places the toggle under */
		
	/* end */	
}

I now have a slightly off centered set of social icons above and have added this to give it some space above –

	/* social */
	.responsive #top #header_meta .social_bookmarks li a {
		margin-top: 40px;
	}

However, I can see that it’s slightly off center and I need to adjust that. I tried padding and margins but couldn’t get it to work. Shall I start a new post or is this a quick fix, please? Thank you, as always :)

Sure and thanks for the speedy reply! I’m using a child theme and commented out all of my attempts in the media queries area tsrating at line 738.

I just wondered if there was a more elegant way to do this other than styling right in the widget text. For anyone else who wants to do this here is my fix for having the left column align left and the right column align right in a 2 column footer:

In (my child theme) custom.css –

/* for right column */

.alignright {
float: right;
}

.footer_color img {
float: right;
margin-top: 5px;
}

Then in my right column widget text –

<p class=”alignright” style=”margin-top: 0px”>Right aligned text here</p><div style=”clear: both;”></div>