Responsive Header Background In Events Template

micon6

Hello, I am new to GavickPro and coding. I am trying to develop a website using the Events template. I have turned off the logo because the client just wants a large graphic with all the conference info (including their logo) at the top of the page.

I have figured out how to change the background image to a placeholder image, turn off the captions and remove the video link. I added some padding in the header and removed some padding in the module below. This is the code I have used in my custom CSS

.frontpage #gkTop1, .frontpage #gkTop2 {
padding: 0px 0 50px;
}

#gkHeaderMod > div > div {
clear: both;
padding: 400px 0 40px 0;
}

I am happy with this but then noticed that the background image is not responsive and will not display properly on tablets and phones.

How do I make this and the other 2 parallax images resize for other devices?

Regards

saguaros

micon6
Hi,

You can try with this custom css:

@media (max-width: 992px) {
.frontpage #gkHeader {
    background: url(../images/header_bg.jpg) no-repeat center top;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
}

micon6

Thanks saguaros,

I tried the code you gave but when I try open the page on a phone or tablet the images just disappear. I would like the images to resize, since this is where the info about the conference will be. Would it also be possible to get the register button to resize as well.
Also, for future reference and in case the background image idea can't work, how could I get two different logos in the top center position and the scroll revealed side position since they seem to use the same image?

Regards

aman204

micon6 I try open the page on a phone or tablet the images just disappear. I would like the images to resize, since this is where the info about the conference will be.

Try change the above CSS suggested to

@media (max-width: 992px) {
.frontpage #gkHeader {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
}

Would it also be possible to get the register button to resize as well.

For this, You can try add this to custom css field and adjust value accordingly :

@media (max-width: 480px) {#gkHeaderMod .btn-big {width:50% !important;}}

micon6

Thanks for the prompt response anan204.

The code you suggested mostly works, but there are a couple of issues.

Everything works fine in landscape orientation on phone & tablet, except that on the phone the button does not resize and is too big.

In portrait orientation on both phone and tablet the Agenda module below the header is visible on load and obscures the header image. Also the image is not fully resized.

Also is it possible to reduce the height of the button , as well?

Regards

teitbite

micon6 Hi. Please add this to css:

@media only screen and (max-width:767px) {
#gkHeaderMod .btn-big {
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    width: 150px;
}

.frontpage #gkHeader {
    background-position: top !important;
    background-repeat: no-repeat;
    background-size: auto 340px;
    background-attachment: initial;
}
}

micon6

Thanks teitbite,

That helps a lot. i had it still cutting off the background image still so I chaged the size in the code to 270px. It works in both landscape and portrait on phone and 7" tablet.

The strange thing though is that on a 10" tablet the image still cuts off. Unless its an easy fix I could live with that (I am sure they will figure out that they should turn the tablet sideways).

While we are working on this, two things

Could the register button be moved to the top of the agenda module above the word agenda?
Could I put back the scroll-activated logo at the left of the menu bar without also having the main center logo.?

Regards

aman204

micon6 The strange thing though is that on a 10" tablet the image still cuts off. Unless its an easy fix I could live with that (I am sure they will figure out that they should turn the tablet sideways).

Precisely, To get this right, You may try add media query CSS for certain breakpoint and then, add specific CSS rule-set/adjust value accordingly for specific CSS declaration

To know Media query CSS concisely for certain devices and their breakpoints, You may refer to this

For the points :

1) To be more precise and avoid confusion/ambiguity in addressing your query, Kindly provide screenshot marked with annotations showing where you wish to have the button positioned and in which screen size ?
2) Again, Kindly confirm which screen size you wish to refer to, in question ?

micon6

Thanks for the media query tips, they will be useful.

Please see the attached screenshots showing the Register button relocated to 18px below the top of the Agenda module. It should disappear when the menu activates at the top.

The logo should appear as shown with the menu. This seems to work on all devices I have checked it on. It seems to resize for phones in the template demo.

Please let me know if this can work.

Regards

aman204

micon6 Please see the attached screenshots showing the Register button relocated to 18px below the top of the Agenda module. It should disappear when the menu activates at the top.

Kindly confirm the device from which screenshot has been taken in order to take closer look as I am unable to see Register button being relocated while the sticky menu activates at varied breakpoints

The logo should appear as shown with the menu. This seems to work on all devices I have checked it on. It seems to resize for phones in the template demo.

For this, You can turn on logo through template settings and thereafter, add this to custom css :

#gkLogo.cssLogo{display:none !important;}

micon6

The screenshots were taking using a Dell Inspiron 7000 Gaming laptop (screen resolution 1920 x 1080).

I have added the code and this is the result

I would like to remove this logo.

I would like to keep this logo.

Regards

aman204

micon6 The screenshots were taking using a Dell Inspiron 7000 Gaming laptop (screen resolution 1920 x 1080).

I am unable to see any such notable issue as viewing on Dell inspiron laptop with almost similar screen resolution/size. Ref: Screencast

I would like to remove this logo.

Your earlier query had been bit different from this one henceforth, the variance which might result in resolution being posted varying from what actually is being asked.

Aligning with our support policy, Please provide clarity as to what you wish to derive and posting screenshot marked with annotations. (if needed to properly illustrate)

If referring to responsive mode in other screen sizes apart from the standard sizes, Please also mention that!

This would also help us to ensure we are moving in right path in terms of addressing your specific query/issue. and not go off-topic which would eventually not benefit anyone

Thanks for understanding

micon6

My apologies for not being clear. It was clear in my head but your point is well taken that I need to get it out in a form that others will easily understand.

The cloudapp screencast that you pointed me to will also be very helpful. I will sign up and use it in the future.

I have to leave now and will be out of touch until Monday or Tuesday. I will pick up this thread again then.

Regards

aman204

micon6 Sure.Will await your reply soon in order to assist further 🙂

micon6

Hello guys,

I had to be away longer than i thought.

The deadline for the website ( https://dbjiconference.touchstoneticketing.com/ ) was extended and it has taken a slightly different turn.

I now no longer need to change the position of the "Registration" button in the home page header but I have three questions:

How could I completely remove the "Registration" button? I haven't been able to find where to turn it off.
If I don't remove it, how do I link it to a hidden menu item (module) that I would create.
How do I change the "eventhours" placeholders on the tabs (see screenshot below) to the actual event time?

Regards

aman204

micon6 Hi

In regards to your queries in last post as the template has been customized and modified to good extent since your trailing forum post :

1) I am unable to see "Registration button" currently. Kindly review
2) You may edit the specific custom module - html output and add A href link as per this tutorial for the specific tab
3) You may ensure first that GK NewsPro GK5 Module is updated to latest version

Would suggest to also take backup of your site before performing aforesaid steps, in case rollback required whilst facing any issues e.t.c

micon6

My apologies, I managed to figure out how to remove the "Register" button and forgot to update the post.

Thanks for the tutorial link.I t has been very helpful.

I will try the module update and advise you of the results.

Regards

micon6

Hello,

I upgraded the GK NewsPro GK5 Module but I decided to just set the font size to zero to remove the "eventhours".

I am having a problem with Simple Image Gallery Pro and K2. I have used the "News" menu item from the template quickstart to create a gallery page. I have set up the gallery using first the image gallery tab and uploading a zip file with photos (jpg, lower case and underscores only in the picture names). I set the root image folder to both images and media/k2/galleries but the images did not show even though I had display image gallery enabled in the Display settings.

I then tried to use the SIG plugin at the bottom of the content tab to insert the gallery in the editor. I set the root image folder to images and uploaded the images through cPanel. This also did not work. only the titles show on the page but no pictures. I am pretty sure my image path is correct.

I tried to find a solution in the new forum and generally on the web but none of the solutions I have found so far (jQuery conflicts etc.) work in this case.

Is there something I am missing?

Regards

aman204

micon6 I am having a problem with Simple Image Gallery Pro and K2. I have used the "News" menu item from the template quickstart to create a gallery page. I

Your site appears to be offline now. Kindly provide site details which you can add in edit fields in order for us to take closer look.

For reference, You can follow thread post (5 point) procedure.

Also, It is perceived that specific query/issue quoted above, doesnt relate to parent topic

Please start a new topic for this forum query/relative issue so as to avoid multiplicity [adding of variety of queries in trailing forum threads which arent related to parent topic] which eventually results in confusion and ambiquity

Thanks for understanding