How extend the image width to full width in the header position

infocubic

Hi,

I would like to extend the image width to full width in the header position and spacing above and below need to be removed.

Please help

saguaros

infocubic
Hi,

Try to use this custom CSS:

#gk-header-mod.gk-page {
    max-width: 100%;
}

infocubic

saguaros

Hello Saguaros,

I have added the custom code as suggested, but still not expanded properly. Above and below space is there. And if I view on the larger desktop right side is not expanded. Please see the screen shot attached.

Please help...

aman204

infocubic And if I view on the larger desktop right side is not expanded

Kindly try to add image with width of atleast 1920px in order to have the image scale to full-width on larger screens as the current one is 1600px due to which it isnt extending because of width limitations

Joshua-M

Hi,

You can also use the following custom css code:

#gk-header-mod #media_image-2 > img {
	width: 100%;
}

Cheers
Joshua

infocubic

Joshua-M

I have added the code the width looks fine now, but the space above the image and below image still there. Please help me get rid of this space.

Joshua-M

Try to add also the following custom css code:

#gk-head {
	border: 0;
	background: transparent;
}

Cheers
Joshua

infocubic

Joshua-M

In the mobile and tablet devices the width of the image is not full width. Please help fix the issue.

aman204

infocubic In the mobile and tablet devices the width of the image is not full width. Please help fix the issue.

Try add this to override.css file :

@media screen and (min-device-width: 320px) and (max-device-width: 768px) {#gk-header-mod.gk-page{padding-left: 0 !important;padding-right: 0 !important;}}

and adjust min-device-width and max-device-width values accordingly to see it as envisaged for certain breakpoints in standard devices

Kindly ensure to clear your browser cache if changes dont reflect