WordPress.org

Ready to get started?Download WordPress

Forums

Changing TwentyTwelve Header to Text on Mobile (3 posts)

  1. skottr
    Member
    Posted 1 year ago #

    Hey, everyone!

    I am using Twenty Twelve - child theme - and have a header image for the larger versions, but when it switches to mobile I am wanting either a small image or just text - instead of the large header being shrunken down. Any idea how to do this? I am still fairly new with coding, but have searched extensively and haven't quite found a solution for this. Basically, I want the default text only header to only show when minimized to a mobile device.

    Thank you greatly in advance for any help!
    Have a good day,
    Scott

  2. paulwpxp
    Font hero
    Posted 1 year ago #

    Use this in child theme's stylesheet or Custom CSS plugin.

    Change those 2 text to yours. These texts will replace the header image when in small screen ( 600px same as theme's break point ).

    @media screen and (max-width: 600px) {
    	#masthead > a img {
    		display: none;
    	}
    	#masthead > a:before {
    		content: "Hello world !";
    		font-size: 24px;
    		line-height: 1.8;
    		color: black;
    	}
    	#masthead > a:after {
    		content: "Just another hello world !";
    		display: block;
    		font-size: 12px;
    		color: grey;
    	}
    	#masthead > a {
    		display: block;
    		margin: 24px 0 0;
    		text-align: center;
    		text-decoration: none;
    	}
    }
  3. skottr
    Member
    Posted 1 year ago #

    Worked perfectly! Thank you so much!

Topic Closed

This topic has been closed to new replies.

About this Topic