Recent
Categories
View Replies (5)

J4 Robyn - Logo not scaling in reactive / mobile mode

  1. Issue
0
Votes
Undo
  1. philiplardner
    philiplardner
  3. Commercial Templates
  4. Thursday, 27 March 2025
  5.  Subscribe via email
J4 Robyn - Logo not scaling in reactive / mobile mode.

Hi Ciaran,

First, thanks for a great Template - I'm very pleased with the results!

http://www.ihpa.iehttp://www.ihpa.ie

However, when viewed on a mobile device (phone/tablet) in portrait mode, the logo is not scaling proportionately.

I tried setting the Mobile Logo Screen Width to ~500, but that didn't help, so I reset it.

Also (and I think because of the logo not scaling) the SlideOut hamburger menu is shoved way off screen to the right and is invisible unless you turn the phone on its side (landscape). I have temporarily set the menu to SlickNav in Responsive Options, but I would prefer to be able to use SlideOut if possible.

I've added the Custom CSS provided in this thread: https://www.joomla51.com/forum/calibra-resizing-logo-on-mobile-view-follow-up which partially solves the scaling problem, but the social media and email icons are still pushed off screen to the right.

Any assistance would be appreciated. I can provide Admin access if needed.

Thanks,

Philip.
Attachments (1)
Screenshot_20250327_151531_Firefox.jpg Screenshot_20250327_151531_Firefox.jpg
Responses (5)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Philip

The issue appears to be caused by the following CSS..

@media only screen and (max-width: 767px) {

    .logo_container, h1.logo, h1.logo a, #logo {

        width: 450px !important;

    }

}


Is this code that has been added to your Custom CSS or Responsive Custom CSS fields?

Ciaran
  1. 2 weeks ago
  2. Commercial Templates
  3. # 1
philiplardner
philiplardner
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran,

Thanks for responding. I had that code in the template's main Custom CSS section when I emailed you. I've transferred it to the Responsive Options: Phone (Portrait) Custom CSS, but with the same result (logo scaling correctly, but social media icons pushed off to the right.)
Attachments (1)
Screenshot_20250401_123626_Firefox.jpg Screenshot_20250401_123626_Firefox.jpg
  1. 2 weeks ago
  2. Commercial Templates
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

May I suggest sending temporary administration access to your Joomla installation to info@joomla51.com and we will examine this issue further. For our reference please paste a link to this post in your email.

Ciaran
  1. one week ago
  2. Commercial Templates
  3. # 3
philiplardner
philiplardner
Accepted Answer Pending Moderation
0
Votes
Undo
Thanks Ciaran. Email sent.
  1. one week ago
  2. Commercial Templates
  3. # 4
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you Philip

I have added the following CSS to your responsive custom CSS fields which appears to have resolved the issue.

#logo {

    max-width: 100%;

}

.header-wrap {

    flex-wrap: wrap;

}


Ciaran
  1. one week ago
  2. Commercial Templates
  3. # 5
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Site Links

Recommended

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok