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

[dil_bert]

 

 

hello and good evening, 

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

[dil_bert]

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/

well this is my  current 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;
}}
	    
    @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;}
}

Edited June 7, 2020 by dil_bert

[dil_bert]

... 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]

Edited June 8, 2020 by dil_bert