Joomla Templates Club 406,261 posts

[gavner Friend gavnerJoin date: June 2008Posts: 142Downloads:213Uploads:2 Thanks: 3 Thanked: 2 times in 1 posts]

#686670

Hi, in the mobile & tablet versions of my site the slideshow is cut off. How can i push all content down so the slideshow is visible ??

[gavner Friend gavnerJoin date: June 2008Posts: 142Downloads:213Uploads:2 Thanks: 3 Thanked: 2 times in 1 posts]

#686724

Can someone please help?

[gavner Friend gavnerJoin date: June 2008Posts: 142Downloads:213Uploads:2 Thanks: 3 Thanked: 2 times in 1 posts]

#749078

Can someone please help?

[gavner Friend gavnerJoin date: June 2008Posts: 142Downloads:213Uploads:2 Thanks: 3 Thanked: 2 times in 1 posts]

#687222

anyone please?

[gavner Friend gavnerJoin date: June 2008Posts: 142Downloads:213Uploads:2 Thanks: 3 Thanked: 2 times in 1 posts]

#749101

anyone please?

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#688119

Hi @gavner,

Sorry for the delay because normally we don’t work in weekend. About your question, I checked your site and see that the slideshow it not cut off but 1 part of the slideshow is stayed below the header part, you can open file /templates/ja_events_ii/css/template.css then look for this code :

@media (min-width: 992px) {
.header-trans .t3-header-wrap .t3-header {
background: transparent;
}
}

simply change it as below :

.header-trans .t3-header-wrap .t3-header {
background: transparent;
}

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#749164

Hi @gavner,

Sorry for the delay because normally we don’t work in weekend. About your question, I checked your site and see that the slideshow it not cut off but 1 part of the slideshow is stayed below the header part, you can open file /templates/ja_events_ii/css/template.css then look for this code :

@media (min-width: 992px) {
.header-trans .t3-header-wrap .t3-header {
background: transparent;
}
}

simply change it as below :

.header-trans .t3-header-wrap .t3-header {
background: transparent;
}

[gavner Friend gavnerJoin date: June 2008Posts: 142Downloads:213Uploads:2 Thanks: 3 Thanked: 2 times in 1 posts]

#691363

Hi, i change it but i dont see any different. Is this the correct code? The header is transparent but the logo is covering most of the slideshow now. I just want to either make the logo smaller or keep the header with a black background and move the slideshow down.

[gavner Friend gavnerJoin date: June 2008Posts: 142Downloads:213Uploads:2 Thanks: 3 Thanked: 2 times in 1 posts]

#749195

Hi, i change it but i dont see any different. Is this the correct code? The header is transparent but the logo is covering most of the slideshow now. I just want to either make the logo smaller or keep the header with a black background and move the slideshow down.

[gavner Friend gavnerJoin date: June 2008Posts: 142Downloads:213Uploads:2 Thanks: 3 Thanked: 2 times in 1 posts]

#691364

I have decided i would like to make the logo smaller on the mobile version by making it responsive or by using a different logo for mobile version. How is this done?

[gavner Friend gavnerJoin date: June 2008Posts: 142Downloads:213Uploads:2 Thanks: 3 Thanked: 2 times in 1 posts]

#749196

I have decided i would like to make the logo smaller on the mobile version by making it responsive or by using a different logo for mobile version. How is this done?

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#691419

Hi @gavner,

1. There’s an option to specify logo for mobile, please navigate to admin >>> Extensions >>> Template Manager >>> choose your template >>> switch to tab Theme >>> Enable Small Logo >>> then set new logo for mobile version there.

2. About the header part, please revert the change in /templates/ja_events_ii/css/template.css, for specific, find this code :

.header-trans .t3-header-wrap .t3-header {
background: transparent;
}

and change it back to :

@media (min-width: 992px) {
.header-trans .t3-header-wrap .t3-header {
background: transparent;
}
}

then open file /templates/ja_events_ii/css/custom.css and add this code :

@media (max-width: 992px) {
.header-trans .t3-header-wrap.affix-top {
position: static;
}
}

Next, open file templatesja_events_iitplsblocksheader.php and look for this line :

<header id="t3-header" class="wrap t3-header-wrap affix-top cpanel-close" data-spy="affix" data-offset-top="1">

change it to :

<header id="t3-header" class="wrap t3-header-wrap affix-top cpanel-close" data-spy="affix" data-offset-top="158">

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#749251

Hi @gavner,

1. There’s an option to specify logo for mobile, please navigate to admin >>> Extensions >>> Template Manager >>> choose your template >>> switch to tab Theme >>> Enable Small Logo >>> then set new logo for mobile version there.

2. About the header part, please revert the change in /templates/ja_events_ii/css/template.css, for specific, find this code :

.header-trans .t3-header-wrap .t3-header {
background: transparent;
}

and change it back to :

@media (min-width: 992px) {
.header-trans .t3-header-wrap .t3-header {
background: transparent;
}
}

then open file /templates/ja_events_ii/css/custom.css and add this code :

@media (max-width: 992px) {
.header-trans .t3-header-wrap.affix-top {
position: static;
}
}

Next, open file templatesja_events_iitplsblocksheader.php and look for this line :

<header id="t3-header" class="wrap t3-header-wrap affix-top cpanel-close" data-spy="affix" data-offset-top="1">

change it to :

<header id="t3-header" class="wrap t3-header-wrap affix-top cpanel-close" data-spy="affix" data-offset-top="158">

[Author]

Posts