Joomla Templates Club 406,261 posts

[Idan Damti Friend Idan DamtiJoin date: September 2014Posts: 94Downloads:0Uploads:1 Thanked: 1 times in 1 posts]

#187736

Hi,
I just added new module position with the name ‘phone’ on the right side of the logo.
my problem is the now, this new position is not responsive and when I am trying to check the site on my iphone or android the text is on top of the slideshow. I tryied to remove the slide and it’s the same thing with any other position.

please let me know what do I need to do and how. my css knowlage is not good at all…

thanks !

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#493908

It would be great if you can include url of your site, an illustrated screenshot of what you are trying to achieve, It would help to understand the issue and give you specific answers.

[Idan Damti Friend Idan DamtiJoin date: September 2014Posts: 94Downloads:0Uploads:1 Thanked: 1 times in 1 posts]

#493972

sorry…

the link of the site is: http://24locallocksmith.com/

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#494038

You are missing some code in templates/ja_mero/tpls/blocks/header.php file. You can fix it this way

from

<!-- LOGO -->
<div class="span6">
<div class="logo logo-<?php echo $logotype ?>">
<h1>
<a href="<?php echo JURI::base(true) ?>" title="<?php echo strip_tags($sitename) ?>"<?php echo $logoimage ?>>
<span><?php echo $sitename ?></span>
</a>
<small class="site-slogan hidden-phone"><?php echo $slogan ?></small>
</h1>
</div>
</div>
<!-- //LOGO -->
<div>
<div class="custom">
......
</div>
</div>

change to

<!-- LOGO -->
<div class="span6">
<div class="logo logo-<?php echo $logotype ?>">
<h1>
<a href="<?php echo JURI::base(true) ?>" title="<?php echo strip_tags($sitename) ?>"<?php echo $logoimage ?>>
<span><?php echo $sitename ?></span>
</a>
<small class="site-slogan hidden-phone"><?php echo $slogan ?></small>
</h1>
</div>
</div>
<!-- //LOGO -->
<div class="span6">
<div class="custom">
......
</div>
</div>

[Idan Damti Friend Idan DamtiJoin date: September 2014Posts: 94Downloads:0Uploads:1 Thanked: 1 times in 1 posts]

#494185

I added the class=”span6″ but it is still the same.
this is my header code:

<!– LOGO –>
<div class=”span6″>
<div class=”logo logo-<?php echo $logotype ?>”>
<h1>
<a href=”<?php echo JURI::base(true) ?>” title=”<?php echo strip_tags($sitename) ?>”<?php echo $logoimage ?>>
<span><?php echo $sitename ?></span>
</a>
<small class=”site-slogan hidden-phone”><?php echo $slogan ?></small>
</h1>
</div>
</div>
<!– //LOGO –>
<div class=”span6″>

<jdoc:include type=”modules” name=”<?php $this->_p(‘phone’) ?>” />

</div>

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#494260

The best way in this case is that you need to change table tags in phone position to image and pm me admin access and ftp account, I shall help you change some css style there.

[Idan Damti Friend Idan DamtiJoin date: September 2014Posts: 94Downloads:0Uploads:1 Thanked: 1 times in 1 posts]

#494455

Hi,
I just PM you all the info… please check. thanks!

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#494593

I fixed the problem on your site. It due to the conflict between css code and I made some changes

Please check it again, let me know if it helps

[woluweb Friend woluwebJoin date: October 2012Posts: 196Downloads:18Uploads:69 Thanks: 68 Thanked: 31 times in 3 posts]

#494679

Txs for this explanation.

I was facing a similar problem and I managed to add a position in my header.php file (well, even better, I duplicated the default layout in the template manager, calling it my-default for example. And then I edited the corresponding my-default.php, making the original header.php point to my-header.php). This way, even in case of update of the template, my site is not down and I can compare my version with the new one when it suits me.

But I wanted to go one step beyond now : I have created this new position in the header, but how can I make it disappear in the smartphone & tablet version of the site ?
How can this be done (and if multiple solutions are possible, what is the best) ?

Txs in advance,

Marc

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#494789

This way will help you hide new position in the smartphone & tablet version

+ Open templates/ja_mero/tpls/blocks/header.php file.

<div class="span6 hide_device">

<jdoc:include type="modules" name="<?php $this->_p('phone') ?>" />

</div>

+ Open templates/ja_mero/css/custom.css file

Add new script

/* mobile */ @media (max-width: 767px) {
.hide_device {
display: none;
}
}

/* tablet */ @media (min-width: 768px) and (max-width: 979px) {
.hide_device {
display: none;
}
}

Let me know if it helps

1 user says Thank You to Ninja Lead for this useful post

1. woluweb

[Idan Damti Friend Idan DamtiJoin date: September 2014Posts: 94Downloads:0Uploads:1 Thanked: 1 times in 1 posts]

#494882

now it’s great !!! thanks a lot…
the only problem left now is when I am trying to add more then 3 lines of text I can’t see the last line…

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#494982

You can send me the screenshot last your problem, it would help to understand the issue and give you specific answers.

[woluweb Friend woluwebJoin date: October 2012Posts: 196Downloads:18Uploads:69 Thanks: 68 Thanked: 31 times in 3 posts]

#495062

Hi & txs a lot for your suggestion.
At first it did not work (but I am using LESS & still in Development Mode, so maybe custom.css would not play its role ?)

Anyway, your suggestion put me on the right path :

I directly edited my template.less file of my Theme (instead of editing responsive-style.css, in case this file would be updated sooner or later) like this :

@media (min-width: 768px) and (max-width: 979px) {
.my_new_position_name {
display: none;
}
}

@media (max-width: 767px) {
.my_new_position_name {
display: none;
}
}

Alternatively, I think I could have replace .my_new_position_name by .hide_device, in which case I would add hide_device in the Module Class (module > advanced options) to simply “activate” the hide function.

Once again, txs a lot @ninja-Lead

[woluweb Friend woluwebJoin date: October 2012Posts: 196Downloads:18Uploads:69 Thanks: 68 Thanked: 31 times in 3 posts]

#495362

Hi @ninjalead,

I was experimenting a bit further :

I have discovered that you could make (dis)appear module positions *according to size of viewport* simply by editing
templates/ja_mero/etc/layout/default.ini
(or home.ini, depending on chosen layout)
For example, footer-3 in hidden in Default Layout when screen is large because of this code :

[block3@footnav]
position="footer-3"
default="span3"
wide="span3 hidden"

But it seems that this does work *only* with pre-existing positions and not with the positions I created myself (well, that’s my empirical conclusion anyway).

So my question is : what should I do to be able to make the same method (ie editing layout/xxx.ini file) work on new positions created by myself ?

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#495455

Hi woluweb,

T3 Framework developed with LESS, the LESS files are compiled to CSS files. Each time you compile, CSS files will be overridden and each time you update the template, the LESS files be also overridden, too. So be careful when changing LESS and CSS, your work can be lost

we suggest you to use custom.css file to customize, it’s not compiled from a LESS file so it will be not overridden or lost when you compile LESS file or update new version of this JA Mero template

Regards

[Author]

Posts