Mobile caption background on hero

Support Area Forums Pneuma Mobile caption background on hero

This topic contains 3 replies, has 2 voices, and was last updated by  Bill Robbins 1 year, 6 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
URL to the page in question: http://myquarterturns.com/arya/
  • Author
    Posts
  • #35934

    Carly Gardner
    Participant

    Hi Bill,

    I’m trying to get a white background behind my hero title/caption on the mobile site. I can’t seem to get it to override though. Is this the right way of trying it?

    @media screen and (max-width: 767px)
    .top .hero-content, .middle .hero-content, .bottom .hero-content {
    background-color: #fff;
    }

    Thanks,

    Greg

    #35937

    Bill Robbins
    Moderator

    Hi Greg,

    Great question. The media queries are a bit unusual in their syntax compared to other CSS. We don’t typically have nested styles which is what they look like.

    In that snippet, it looks like the brackets for the media query itself are missing. Try using this:

    
    @media screen and (max-width: 767px) {
    
    	.top .hero-content, 
    	.middle .hero-content, 
    	.bottom .hero-content {
    		color: #000;
    		background-color: #fff;
    	}
    
    }
    
    

    I added in a color to change the text color to black from the default white as well. See how that works for you and let me know if you run into any trouble.

    Have a great weekend,
    Bill

    #35952

    Carly Gardner
    Participant

    Well those brackets would help wouldn’t they. It worked, thanks as always!

    #35953

    Bill Robbins
    Moderator

    Glad that did the trick 🙂

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Mobile caption background on hero’ is closed to new replies.