Joomla Templates Club 406,261 posts

[sobini Friend sobiniJoin date: May 2007Posts: 52Downloads:4Uploads:6 Thanks: 29]

#191605

As I have a very long logo, it does not fit in the mobil version, so I want to have a different logo for the mobil version.
Where can I add that logo? Or is it possible to have the Logo automatically resized?

(joomla 3.1.5, Beranis 1.0.3)

I appreciate any help!

---

Attachments:

1. 

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#509962

Hi sobini,

You can try to create a smaller logo image for mobile only and put below overridden css styles into templates/ja_beranis/css/custom.css file:

@media (max-width: 479px) {
.logo-image h1 a {
width: 210px;
height: 100px;
background-size: 100% auto;
background: url('img_path');
}
}

Adjust the css properties to fit it..

[sobini Friend sobiniJoin date: May 2007Posts: 52Downloads:4Uploads:6 Thanks: 29]

#510430

Thanks, I did as suggested, but the Logo doesn’t show up.
Do I need to change anything else in addiction to the above code in the custom.css?

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#510453

Hi sobini,

The reason that you uploaded the logo image into Theme tab of the Template Style so that you don’t need to define the logo image path anymore. You can try to open custom.css file, replace lines:


/* mobil logo */
@media (max-width: 479px) {
.logo-image h1 a {
width: 160px;
height: 90px;
background-size: 100% auto;
background: url(http://your_domain.com//images/UWERK_LOGO_MOBIL.png);
}
}


with

/*Mobile logo*/
@media (max-width: 479px) {
#t3-header {
height: 50px;
}

.logo-image h1 a {
width: 160px;
height: 40px;
background-size: 100% auto;
}
}

The logo will look quite small on mobile but that is a best procedure to keep Off-canvas button, logo and search box stay in one row on mobile.

1 user says Thank You to phong nam for this useful post

1. manuelreil

[sobini Friend sobiniJoin date: May 2007Posts: 52Downloads:4Uploads:6 Thanks: 29]

#511373

This worked great for me, thanks.
Just in the wide view of a mobil phone the logo doesn’t swith to small, and so it covers almost the whole screen, so that there is only a tiny screen to see and scroll for the rest of the content. Attached is a screeshot.
How can the Logo be resized for the wide screen, or can it be made unsticky, so it scrools with the rest of the content?

I appreciate any help.

---

Attachments:

1. 

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#511377

Hi,

Inside the codes I mentioned you above. You can change:
@media (max-width: 479px) {

to
@media (max-width: 568px) {

By that way, the logo will switch to small on both portrait and landscape view of iPhone, even also iPhone 5c 🙂

1 user says Thank You to phong nam for this useful post

1. sobini

[sobini Friend sobiniJoin date: May 2007Posts: 52Downloads:4Uploads:6 Thanks: 29]

#511603

Thank you so much, it worked perfectly!

[Author]

Posts