Wp-Twentyseventeen: Flip Of Size In Featured-Image: From Ok To Ko

[tarifa]

Hello dear experts good day 

 

 

first of all;  i hope you are all right and all goes well on your site.  i hope that your home-town is dealing well with the pandemic-situation. 

 

today i have a issue on the wp-theme twentyseventeen: Flip of size in Featured-Image: the size in the desktop view is too big - on mobile (responsive) okay

 

i have found out that there is a flip - if we watch the site on a mobile phone - then the images look tiny - the proportions are neat and nice. see the awesome comparison i have made in chrome.. see the flip of the both pictures..

 

enter image description here

 

btw: see the site: https://www.job-starter.com

 

 

 

 

see the flip of the size of the image. 

 

 

 

 

 

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

 

 

Any ideas!? 

 

look forward to hear from you 

 

 

[tarifa]

first of all i will loook into all that. I will try to digg deeper. 

afaik -as far as i understand your postings then i should use another way of upload the images -not as a backgroud image. 

 

 

the interseting finding: the addtional css in the theme-customizer is not working  - in other words. no change in the comands of the additonal css 

 

has any effect - it looks in some way like i have the very same behavior like the other authors ..here:

 

https://stackoverflow.com/questions/14644138/custom-css-in-wordpress-not-working#comment20460334_14644138
Additional CSS not working?
 

https://wordpress.org/support/topic/additional-css-not-working/

 

.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;
}}
    
    @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;}
}

well this is my  current additional css... 

 

 

 

[tarifa]

... more insights: 

very interesting as mentioned above: it seems that the additional css in the customizer does not accept any changes.
or - in other words: All i change here .- has absolutly no effect on the behavior of the site.

this is very very interesting _

but i keep on working on the issues


i will report and let you know all the findings.

 

[media]https://imgur.com/leEDm8k[/media]