[HansH]

Hello,

I tried to add an header image.
On a laptop screen all is well; on a mobile scree also. On a big monitor screen the image is deformed.
All people looks compressed.
The original image you can see here; the result in the website you can see here.

I tried this with an image with 1920 and 820 pixels and an image with 1920 and 1080 px. WordPress minimizes the pixels of the 1920 x 1080 pixels till 1920 x 820 px.

How can I fix this?

Kind regards

Hans Hagmeijer

[tikaram]

@hansh : I checked your site http://staging.toerfietsleusden.nl
You have added the following additional css. The  max-height is limiting the height of your header image due to that the header image seems to be compressed. You will need to set the max-height to auto so that the actual height of the image will be displayed. Let me know if you have any other thoughts regarding the issue.

.header-media .post-thumbnail img {
max-width: 1800px;
max-height: 600px;
}

[HansH]

Hello Tikaram,

I inputted the css and will ask someone to look at it, because I only have a small laptop screen. And the problem occurs when people look on a big screen.

I let you know if this css did it.

I don’t understand how I can set the max height on auto. I will search for it.

Kind regards

Hans Hagmeijer

 

[Sakin]

Hi Hans,

You need to clean up your Custom CSS, there are many issues in Custom CSS on your site staging.toerfietsleusden.nl.

1. Find the following CSS:
/*inhoud naar boven*/
.home .site-content{
 margin-top: -50px;
 margin bottom: 5px;
}

Replace that with the following:

/*inhoud naar boven*/
.home .site-content{
 margin-top: -50px;
 margin-bottom: 5px;
}

2. Find the following CSS, it is there twice,

.header-media .post-thumbnail img {
 max-width: 1800px;
 max-height: 600px;
}

So, delete the one and replace the other one with the following:

.header-media .post-thumbnail img {
 max-width: 1800px;
}

3. Find the following CSS, it’s missing closing } at the end:

/* To change the color of the text, overlay and font size */
@media screen and (min-width: 64em) {
 .portfolio-content-wrapper a {
  color: #ffffff;
 }
 #header-content .site-branding {
  margin-right: 0;
 }

So, replace that with the following, you can see it has a closing bracket

/* To change the color of the text, overlay and font size */
@media screen and (min-width: 64em) {
 .portfolio-content-wrapper a {
  color: #ffffff;
 }
 #header-content .site-branding {
  margin-right: 0;
 }
}

Regards,
Sakin

 

 

[HansH]

Hello Sakin,

Thank you. This is what you get if an amateur like me is working at a website.
Without the help of Catchthemes there shouldn’t be a website for our cycling club.

Kind regards

Hans Hagmeijer

[HansH]

Hi Sakin,

I compare the css in topic 1 and I don’t see any difference between de css and the replacement css. Can that be right?
Of course I will replace the css with the css you provided me today.

Kind regards

Hans Hagmeijer

[HansH]

Hello Sakin,

The Css I added has no effect. You can see it here.

The people in the header are all compressed.
Problem is: on the phone: looks good; on the iPad; looks good; on my 13 inch laptop: looks good. From 17 inch: people look compressed.

Is it a suggestion to use an image with 1800 x 600 px in advance?

Kind regards

Hans Hagmeijer

[HansH]

Hello Sakin.

I now used an image with 1800 x 600 px.
Someone who has a screen with 3840 x 2160 has looked at it and said it was allright.
On other screens the result is also good.
So you can close this topic.
Thank you for working on this.

Kind regards

Hans Hagmeijer

[Sakin]

Hello Hans,

In the 1 CSS, there was just a missing – between margin and button. Now, your Custom CSS doesn’t have an error. But I still see the following CSS that you need to delete, which is just below the text /*header media voorkomen wegsnijden onderkant*/,

.header-media .post-thumbnail img {
 max-width: 1800px;
 max-height: 600px;
}

You need to delete the above CSS as you already have another same CSS which fixes the height
 /* afmeting header*/
.header-media .post-thumbnail img {
 max-width: 1800px;
}

Regards,
Sakin

[HansH]

Thank you Sakin,

I wil do this later in the evening.
Tuesday is our club’s cycling evening. 🙂

Kind regards

Hans Hagmeijer

[Sakin]

Have a nice Cycling evening.

[Author]

Posts