Jump to content

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


dil_bert

Recommended Posts

 

 

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


b14dR.png


see the flip of the size of the image. 


PBQFA.jpg

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

Link to comment
Share on other sites


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 by dil_bert
Link to comment
Share on other sites


... 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 by dil_bert
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.