Metro Theme – Auto Adjust Title Image Size

Community Forums Forums Design Tips and Tricks Metro Theme – Auto Adjust Title Image Size

This topic is: resolved

Tagged: 

This topic contains 5 replies, has 2 voices, and was last updated by  Boots 1 year, 1 month ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #63685

    Boots
    Participant
    Post count: 5

    Hello,

    I’m having an issue with my .title-area image. When I adjust my screen size or use a mobile device, it is not adjusting to meet the size of the frame. It does adjust, but only when you get down to around 280 pixels. My widget area image is adjusting fine.

    I have read this article on the subject:

    http://wpsites.net/web-design/customize-header-logo-banner-images-in-metro-theme/

    I have adjusted my css as follows (note, I am not good at coding in CSS):

    .title-area {
    float: left;
    padding: 0;
    width: 665px; /* 665px / 1080px */
    }

    .header-image .site-title a {
    background-color: none;
    max-width: 665px; /* 665px / 1080px */
    min-height: 80px;
    padding: 0;
    }

    .site-header .widget-area {
    float: right;
    width: 330px; /* 330px / 1080px */
    }

    Any advice on how I can get the title image to adjust to screen size would be helpful. Thanks.

    Site: kansascitywebuyhouses.com/

    #63697

    braddalton
    Participant
    Post count: 10563

    Are you using a image for your title or text?


    #63698

    Boots
    Participant
    Post count: 5

    Image, it just looks like the default text for the theme

    #63910

    Boots
    Participant
    Post count: 5

    I realize that could have been taken as sarcasm, but I really did create an image with the Oswald font as text. I checked on an iPhone and it works fine, but not on android.

    It’s not a big deal, but I would like it to look clean on any format.

    #63970

    braddalton
    Participant
    Post count: 10563

    You may need to tweak the code for media queries. Or install a plugin which uses conditional tags for different mobile devices.


    #64035

    Boots
    Participant
    Post count: 5

    You are correct! I added this to @media only screen and (max-width: 767px) :

    .header-image .site-title a {
    background-size: contain !important;
    }

    Thanks for all your help!

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

You must be logged in to reply to this topic.