6 Replies - 915 Views - Last Post: 08 June 2020 - 09:18 AM Rate Topic: -----

#1 sayhello   User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 358
  • Joined: 12-November 17

wp-twentyseventeen: Flip of size in Featured-Image: from ok to ko

Posted 04 June 2020 - 11:48 AM

Hello dear experts good day der Artificalsoldier,


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


Posted Image


see the flip of the size of the image.


Posted 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

This post has been edited by sayhello: 04 June 2020 - 11:58 AM


Is This A Good Question/Topic? 0
  • +

Replies To: wp-twentyseventeen: Flip of size in Featured-Image: from ok to ko

#2 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2714
  • View blog
  • Posts: 7,997
  • Joined: 15-January 14

Re: wp-twentyseventeen: Flip of size in Featured-Image: from ok to ko

Posted 04 June 2020 - 12:18 PM

You should probably constrain the width. You're only telling it how to handle the height. The image is almost 3000px wide.
Was This Post Helpful? 1
  • +
  • -

#3 sayhello   User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 358
  • Joined: 12-November 17

Re: wp-twentyseventeen: Flip of size in Featured-Image: from ok to ko

Posted 04 June 2020 - 12:25 PM

hello dear Artificalsoldier - Many thanks for the quick reply.

Thanks for the hints. i have heard that there is a more or less strict ratio between height and width - that said.

" if it is tooo wide - then it is subsequently too heigh tooo " - is this a correct description of a inherent ratio - that is theme-inherent and i am subsequently facing the outcome of this
rule !?


Note - this is a great hint - i have to look after this ... i will dive into this later the evening.

many many thanks for the hints.

i need to leave the house but i am back home in two hours - then i will respond more thouroghly ...


Thanks so far - this is such a great place - i am very very glad!!!
Was This Post Helpful? 0
  • +
  • -

#4 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2714
  • View blog
  • Posts: 7,997
  • Joined: 15-January 14

Re: wp-twentyseventeen: Flip of size in Featured-Image: from ok to ko

Posted 04 June 2020 - 12:53 PM

Another issue is that this is not a regular image, it's a div with a background image. Maybe try different values for background-size, instead of cover try contain, or set a percentage size.
Was This Post Helpful? 1
  • +
  • -

#5 sayhello   User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 358
  • Joined: 12-November 17

Re: wp-twentyseventeen: Flip of size in Featured-Image: from ok to ko

Posted 06 June 2020 - 10:02 PM

hello and good day dear ArtificalSoldier,

first of all - many many thanks for the answer - 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.

View PostArtificialSoldier, on 04 June 2020 - 07:53 PM, said:

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



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://stackoverflo...460334_14644138
Additional CSS not working?
https://wordpress.or...ss-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;}

}

 

Was This Post Helpful? 0
  • +
  • -

#6 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2714
  • View blog
  • Posts: 7,997
  • Joined: 15-January 14

Re: wp-twentyseventeen: Flip of size in Featured-Image: from ok to ko

Posted 06 June 2020 - 11:32 PM

When I use my browser's developer tools to change the background-size on that div from "cover" to "contain," it looks better. Start with that change only and go from there.
Was This Post Helpful? 0
  • +
  • -

#7 sayhello   User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 358
  • Joined: 12-November 17

Re: wp-twentyseventeen: Flip of size in Featured-Image: from ok to ko

Posted 08 June 2020 - 09:18 AM

Hello dear ArtificalSoldier

many thanks for your reply - and for the hint : this is a great starting point. I will digg deeper.

View PostArtificialSoldier, on 07 June 2020 - 06:32 AM, said:

When I use my browser's developer tools to change the background-size on that div from "cover" to "contain," it looks better. Start with that change only and go from there.



https://imgur.com/leEDm8k

https://imgur.com/leEDm8k



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

Many thanks for youc continued help and support.

dear ArtificalSoldider: :bigsmile:

one very important question:; Do you have any idea why i get no effect in editing the additional css: there i can edit whatever i want - there is no effect to the behavior of the page...!?



i will report and let you know all the findings.

have a great day -

regards

This post has been edited by sayhello: 08 June 2020 - 12:14 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1