CSS for "cover" size and standard height

Hi GiorgarasAE,

I need a bit more information on the issue you are experiencing. Are you trying to use the cover property for background images?

Thanks,
Nick

Hi ndiego,

I want to use this for the image that the plugin outputs. You can see below an example of my “problem” (white space at the left and right and smaller responsive height).

https://181.224.135.122/~pieriast/stromata-upnou/aneksartita-elatiria/

Thanks for your quick reply ??

Hi ,

So sorry for the delayed reply. You just need to add a bit of additional CSS.

.gch-header-image-inner {
  width: 100%;
}
.gch-header-image-inner img {
  width: 100%;
}

That should do it for the white space on the sides. The smaller responsive height issue can be resolved by setting an image as a background image on a <div> and then controlling the <div> width and height on different screen sizes. In order to do something like this, you would need to use the Header Raw Content option. You might need to enable it from the Plugin Settings page (located under Appearance). If this is the route you would like to take, let me know and I can try and provide you with some sample HTML and CSS that will make this work.

Best,
Nick

Hello,

That worked as expected, thank you!

I’ve tried to use this feature and handle the height, but it seems that i did something wrong. I would appreciate it if you could help me with this too.

Thanks in advance!

Hi GiorgarasAE,

Sure thing. Can you let me know what Genesis Theme you are using? the solution will require media tags so I want to make sure I set them up correctly to work with your theme.

Thanks,
Nick

Hey ndiego,

I am using the Sample Child Theme.

Thanks!

Hi,

So it took me a bit to find a solution, and you are still going to need to tweak this to get it to work…

Your theme has three different break points, so you need to specify CSS for each. Below is the example code I used. You can adjust the height up and down as needed.

@media only screen and (max-width: 1200px) {
	.gch-header-image-inner img {
		width: 100% ;
		height: auto;
	}
}

@media only screen and (max-width: 960px) {
	.gch-header-image-inner img {
		width: auto !important;
		max-width: inherit;
		height: 400px;
	}
}

@media only screen and (max-width: 800px) {
	.gch-header-image-inner img {
		width: auto !important;
		max-width: inherit;
		height: 300px;
	}
}

Note that on smaller screens, you will only see the left hand side of the image, the rest will flow off the side of the screen. On way to counter this effect is take a completely different approach using the Header Raw Content option with background images. This takes a bit more HTML and CSS. If you would like to see a code snippet of that I can dig one up, but otherwise this is about all the free support I can give on this.

I hope this helps, good luck.

Nick

Hey Nick,

Worked as expected. Great support for a free plugin man. I really thank you.

I might need your extra support in the future, so please tell how can i get in touch with you if so.

Thanks in advance,
George.