Header Image and text responsive in mobile and tablet devices/Responsive queries

infocubic

Hi,

I would like to make header Image and text responsive in mobile and tablet devices, please help

Joshua-M

Hi,

Try to add the following custom css code into your override.css file (adjust css values to your needs):

@media (max-width: 580px) {

.imageBg #gk-head {
    z-index: 3333;
}

.imageBg #gk-header-mod h1, .imageBg.frontpage .imageBg h1 {
    font-size: 18px!important;
    line-height: 1.3!important;
}
}

Cheers
Joshua

infocubic

Joshua-M
I have added the code but it is not coming properly, please check

aman204

infocubic Try add this also to override.css file and adjust width value accordingly :

@media (max-width: 580px){.imageBg #gk-header-mod .textwidget{width:40% !important;}}

Kindly ensure to clear your browser cache if changes dont reflect

infocubic

aman204

I have added the code, still I am facing some challenges in the mobile landscape mode and tablet mode (the h1 font is coming big). Kindly check.

And also I want to remove the while strip coming in the mobile over the logo and top of the image. Please help.

One more thing that the image is not displaying in the mobile devices in the section " Top 2 Reasons, Why 80% of Businessess do not get to Celebrate their 1st Anniversary." . I want everything showing in the desktop device to come in mobile device as well. Please help.

aman204

infocubic I have added the code, still I am facing some challenges in the mobile landscape mode and tablet mode (the h1 font is coming big). Kindly check.

Can see the media query css suggested by Joshua reflecting fine. You may adjust font-size value accordingly

And also I want to remove the while strip coming in the mobile over the logo and top of the image.

You may change this :

@media only screen and (min-device-width: 320px) and (max-device-width: 480px){.imageBg #gk-header-mod .textwidget{width:40% !important;}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px){.imageBg #gk-header-mod .textwidget{width:40% !important;}#gk-menu-wrap{background: transparent;}#gk-menu-wrap.active{background:#fff !important;}}

One more thing that the image is not displaying in the mobile devices in the section " Top 2 Reasons, Why 80% of Businessess do not get to Celebrate their 1st Anniversary." .

Responsive screen size has it own limitations regardless of template or platform being used which is majorly due to space limitations. However, If you wish to show the image which will appear in stack mode (one upon another), You can finally add this media query css :

Note - have edited the media query css declarations to get them right

infocubic

aman204
I have added the code you suggested and almost issues are fixed except below, please help

on the mobile device logo link and menu link is not working....
Unable to reduce the font size for mobile device landscape mode and tablet mode

Joshua-M

Regarding your issues:
1. Try to add the following custom css code:

@media (max-width: 580px) {
#gk-menu-wrap {
	position: relative;
}
}

Try to add also this fragment:

@media (min-width: 580px) and (max-width: 1070px) {
    .imageBg #gk-header-mod h1, .imageBg.frontpage .imageBg h1 {
        font-size: 26px;
    }
}

Cheers
Joshua

infocubic

Joshua-M
After adding the below code, when I scroll down the logo and menu item is showing at the bottom. Can you please help to fix this?

@media (max-width: 580px) {
#gk-menu-wrap {
position: relative;
}
}

Joshua-M

infocubic Sorry, I didn't scroll to the bottom.. Instead of mentioned code, try to add this one:

#main-menu-mobile {
    z-index: 3333;
}

#gk-header-nav h1 {
    position: relative;
    z-index: 3333;
}

infocubic

Joshua-M

I have added the code but still it is coming at the bottom only.. pls check

aman204

infocubic Hi

Try add this :

@media only screen and (min-device-width: 320px) and (max-device-width: 480px){
#gk-menu-wrap{position: fixed !important;
top: 0 !important;
z-index: 3333;}
}

infocubic

aman204
Hello Aman,

I have added this code now again logo link and menu link is not working....

aman204

infocubic I have added this code now again logo link and menu link is not working....

Having checked in realtime on Vivo nex and responsive emulator, The logo and menu links apparently work fine for me. Kindly review again after clearing your browser cache

infocubic

aman204 I have checked again and again in many devices which has 5.0 inches to 5.5 inches logo link and menu link is not active. I'm really fed up with this template...

aman204

infocubic I have checked again and again in many devices which has 5.0 inches to 5.5 inches logo link and menu link is not active

As I am unable to replicate relative issue as mentioned, Have requested other team members also to review at their end.

Please be patient till we revert back

aman204

infocubic I have checked again and again in many devices which has 5.0 inches to 5.5 inches logo link and menu link is not active

With close observation, The relative issue can be replicated whilst the site isnt scrolled down. Can you add your admin and ftp details in edit fields in order for us to take closer look and examine the media query css declarations in specific file which have been added
For reference, You can follow thread post (5 point) procedure.

paulus1031

We are having a chat about your problem and we will get back to you asap

infocubic

aman204

I have updated the FTP and admin credentials

aman204

infocubic Kindly check now. Have added some media query css in override.css file in order to get it right.

Kindly ensure to clear your browser cache if changes dont reflect