• Resolved ando337

    (@ando337)


    The Blog I need help with: https://yesindeed.de

    Hey everyone,

    I want to have a bigger font size for the main title of the featured blog post (the one at the top “Avocado Superfood?”).

    I tried to change the font size in the additional CSS section, but changing “3.2rem; to 4.2rem” or “h2 to h1” or “line-height: 122% to 150%” has no effect.

    .mvp-feat2-main-title h2,
    
    .mvp-feat2-main-title h2 {
    	background-color: rgba(0,0,0,.8);
    	box-decoration-break: clone;
    	-webkit-box-shadow: 10px 0 0 rgba(0,0,0,.8), -10px 0 0 rgba(0,0,0,.8);
    	   -moz-box-shadow: 10px 0 0 rgba(0,0,0,.8), -10px 0 0 rgba(0,0,0,.8);
    	    -ms-box-shadow: 10px 0 0 rgba(0,0,0,.8), -10px 0 0 rgba(0,0,0,.8);
    	     -o-box-shadow: 10px 0 0 rgba(0,0,0,.8), -10px 0 0 rgba(0,0,0,.8);
    		box-shadow: 10px 0 0 rgba(0,0,0,.8), -10px 0 0 rgba(0,0,0,.8);
    	color: #fff;
    	display: inline;
    	font-size: 3.2rem;
    	font-weight: 700;
    	line-height: 122%;
    	}
    
    .mvp-feat2-main-title h2:hover {
    	color: #ffee00;
    	}
    
    .mvp-feat2-main-title h2.mvp-stand-title {
    	font-size: 2.2rem;
    	line-height: 125%;
    	}

    Anyone who knows what to do?

    Many thanks,
    Anke

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    The font size for that element is set as default but then overridden at various device widths.

    For example, this works at the current width of my browser:

    @media screen and (max-width: 1300px) and (min-width: 1201px) {
       .mvp-feat3-text h2.mvp-stand-title {
        font-size: 47px;
       }
    }

    You’ll need to play with your browser width and adjust the font size appropriately when each breakpoint kicks in.

    To add CSS:

    • If you are using WordPress 4.7, use the “Additional CSS” option in the customizer.
    • If your theme has a custom CSS option, use that to add the CSS shown above.
    • If not, install the plugin Simple Custom CSS.

    Learn to use the Chrome Developer Tools to help you see and test changes to your CSS.

    h2.mvp-stand-title {
    font-size: 3rem !important;
    line-height: 115%;
    }

    Thread Starter ando337

    (@ando337)

    Awesome, thank you very much for the quick response!
    I changed the maximum width and now I can edit the font size.

    I hope one day I can recognize things like that myself! Total beginner in that field =D

    Best wishes,
    Anke

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘edit font size of main title’ is closed to new replies.