Support » Theme: Twenty Seventeen » how to resize the featured image in the twentyseventeen_theme?

  • hello dear community,

    how to handle the size of the featured images in the theme 2017?

    i have a beta-page where i have added two featured images – but at the moment they are tooo big: in width and height? Note i have text in the images – but this text is almost not readable.

    The full story:

    On the menu, i just have to to shorten the titles a bit because no mater, if we have long titles it will wrap to a new line if they get too long.
    That said, right now, the max width is 1000px, so i could add CSS to the additional CSS section to make it fit max width. For example, something like this work quite nicely:

    
    .navigation-top .wrap { max-width: 96%; text-align: center;}
    .navigation-top [class*="menu-primary"] { text-align: center; display: inline-block;}

    so far so good:

    see the page: https://www.job-starter.com/

    i already have fixed one thing – and i continue to squash the last few things out of the way: one thing is left: the featured images: i am referring to the large parallax background images that are stretched too big to read,
    – then those are like that because there must be a setting to use them as a full screen background image.
    – i guess that type of setting will always make the images the images out of proportion because it is based on the users background width.
    – i also guess that makes it so i will never get it to 100% the actual width (or proportionate).

    hmm – i need to set them to maintain proportions if possible, or not to be parallax*. Parallax by default is meant to be static full background width, so we can’t really use images with text for that type of featured image.
    but: the funny thing is: for some reason i cannot crop or maintain the images in the media-area of WordPress.
    Probably some thing is not working with the graphic-support on the server.
    in fact i do not see the images at all in the media-area – the screen is like blank.

    hmm – i need to set them to maintain proportions if possible, or not to be parallax*. Parallax by default is meant to be static full background width, so we can’t really use images with text for that type of featured image.
    but on a sidenote: the funny thing is: for some reason i cannot crop or maintain the images in the media-area of WordPress. Probably some thing is not working with the graphic-support on the server. in fact i do not see the images at all in the media-area – the screen is like blank.

    note – i can upload images _ but i only see them as featured images – but not in the library. Guess that some thing is wrong with the media (image) magic-Libs in the php configuration.
    but back to the main issue: how to achieve the images settings so that the featured images appear a little smaller – not so high?!

Viewing 2 replies - 1 through 2 (of 2 total)
  • btw see the code that i currently have in the additional – CSS

    .wrap { max-width: 1366px; }
    
    .wrap { max-width: 1366px; }
    
    @media screen and (min-width: 1168px) {
    
        .entry-header,
        .entry-content {
            float: left;
        }
        
        .entry-header {
            margin-right: 5%;
            width: 35%;
        }
        
        .entry-content {
            width: 85%;
        }
    }
    
    .search_keywords {
      font-size: 16px;
      font-family: serif;
    }
    
    .search_location {
      font-size: 16px;
      font-family: serif;
    }
    
    .search_category {
      font-size: 16px;
      font-family: serif;
    }
    
    .navigation-top .wrap { max-width: 96%; text-align: center;}
    .navigation-top [class*="menu-primary"] { text-align: center; display: inline-block;}
    
    /*For Content*/
    .has-sidebar:no(.error404) #primary {
    width: 60%
    	
    /*For Sidebar*/
    .has-sidebar #secondary {
    width: 30%
    }
    
    /*Responsive*/
    @media(max-width:768px) {
    /*For Content*/
    .has-sidebar:(.error404) #primary {
    width: 100%
    }
    
    /*For Sidebar*/
    .has-sidebar #secondary {
    width: 100%
    }
    }
    
    /* STRUCTURE */
    
    .wrap {
    max-width: 80% !important;
    }
    
    .page.page-one-column:not(.twentyseventeen-front-page) #primary {
    max-width: 100% !important;
    }
    
    @media screen and (min-width: 48em) {
    .wrap {
    max-width: 80% !important;
    }
    }
    
    @media screen and (min-width: 30em) {
    
    .page-one-column .panel-content .wrap {
    max-width: 80% !important;
    }
    }
    
    @media screen and (max-width: 350px) {
    
    .wrap {
    max-width: 95% !important;
    }
    }
    @media screen and (min-width: 48em) {
    .background-fixed .panel-image {
    background-attachment: initial;
    }
    }
    
    .custom-header-media {
        height: 6vh;
    }
    
    @media screen and (min-width: 48em) {
    .panel-image {
    height: 460px;
    }}
    
    .postid-256 .single-featured-image-header img {
    /* display: block; */
    /* margin: auto; */
    height: 45vh;
    object-fit: cover;
    }
    
    .postid-258 .single-featured-image-header img {
    }
    @media screen and (min-width: 48em) {
    .postid-258 .panel-image-prop {
    padding: 12px; height:33px;
    object-fit: cover;
    }}
    apolloman

    (@apolloman)

    My idea on the images was the following: can just not make them parallax by adjusting the styles. They seem to work ok in the mobile width because it turns them into non-fixed images. Using that thinking, i could add this to the “Additional CSS” (at the bottom):

    @media screen and (min-width: 48em){
     
      .background-fixed .panel-image {background-attachment: scroll !important;} 
    
      .panel-image {height: auto !important; max-height: 800px; background-size: contain !important;}
     
    }
    

    That should fix the images on the page. but it did not.
    Note: i run the twentyseventeen – theme with a two column option.

    any idea? see the site: https://www.job-starter.com
    look forward to hear from you

    See https://imgur.com/g3UDaNZ.png

    and see more – see more images

    See https://imgur.com/iUT4vzU.png

    note: i should probably constrain the width. it is not only to handle the height. The image is almost 3000px wide.

    Another issue is that this is not a regular image, it’s a div with a background image. Maybe i should try different values for background-size, instead of cover try contain, or set a percentage size.

    look forward to hear from you

    • This reply was modified 1 month ago by apolloman.
Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.