Support Forums

Support Online : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Logo

Featured Lock Resolved Issue
Hello,

I replace the Kidzy logo with the logo of my client and this one is misplaced, I do not understand why.

Thank you for your help

Attachments (2)

  • Capture d’écran 2017-07-31 à 11.53.03.png
    Capture d’écran 2017-07-31 à 11.53.03.png 463.5 KB
  • Capture-d’écran-2017-07-31-à-11.52.41.jpg
    Capture-d’écran-2017-07-31-à-11.52.41.jpg 36.8 KB

35 Answers

Shibbir

More than a month ago #Permalink
Hi there,

Send me your website url to check.

Thanks.

Shibbir

More than a month ago #Permalink
Hi there,

Replace following CSS code from custom.css file at line number 35:


#sp-header .logo {
height: 76px;
display: table;
position: inherit;
z-index: 10;
top: -50px;
left: -50px;
}


Thanks.

stq74

More than a month ago #Permalink
Great and thank you,
By cons on the tablet the logo is not displayed and on mobile phone it appears badly.
Also on my tablet, my last menu link goes to the line.

Thank you

Paul Frankowski - Staff

More than a month ago #Permalink
Hi. Please use Shibbir code inside:


@media (min-width: 768px){

..here...
}


it will fix problem.

stq74

More than a month ago #Permalink
Hello,

that is to say that I add to suite in the custom.css?
like this :

#sp-header .logo {
height: 76px;
display: table;
position: inherit;
z-index: 10;
top: -50px;
left: -50px;
}

@media (min-width: 768px){
height: 76px;
display: table;
position: inherit;
z-index: 10;
top: -50px;
left: -50px;
}

Paul Frankowski - Staff

More than a month ago #Permalink
No, please use whole code, not part of it !!

@media (min-width: 768px){
#sp-header .logo {
height: 76px;
display: table;
position: inherit;
z-index: 10;
top: -50px;
left: -50px;
}
}


---
I suggest in free time read some CSS3 manuals.:p
---
Yes inside custom.css or here , but delete old code before.

Attachments (1)

  • custom_css_field_helix3.png
    custom_css_field_helix3.png 9.9 KB

stq74

More than a month ago #Permalink
Thank you but it does not change anything, the logo still does not appear on tablet.

Thank you, yes I have to look at the manual css3.

Paul Frankowski - Staff

More than a month ago #Permalink
Have you checked on smartphone?
---
Clear Tablet browser cache, I see logo now on Samsung Tab 7"
What tablet you have for tests?

stq74

More than a month ago #Permalink
Motorola g 1st generation, and empty the cache of my ipad air.

Always the same

Paul Frankowski - Staff

More than a month ago #Permalink
1) Have you uploaded logo for mobile and retina as well ?
2) What version of template you have ?

stq74

More than a month ago #Permalink
1) Oops, I had not downloaded the logos mobile and Retina, by cons what format should have the logos? I doubled for retina, this is displayed well on my ipad in portrait position but not in landscape position.
2) version 1.8

Thank you

stq74

More than a month ago #Permalink
Hello,
I come back to you because I can not manage with the mobile logo, in portrait position it is cut and in landscape position, it is too big and there is a large white block.

Thank you for your help

Paul Frankowski - Staff

More than a month ago #Permalink
portrait position of what? Tablet / Smartphone

stq74

More than a month ago #Permalink
smartphone

Capture1.png
Capture2.png

Samll tablett

Capture3.png

thank you

Attachments (3)

  • Capture1.png
    Capture1.png 332.6 KB
  • Capture2.png
    Capture2.png 333.4 KB
  • Capture3.png
    Capture3.png 672.8 KB

Paul Frankowski - Staff

More than a month ago #Permalink
site is locked, offline mode

stq74

More than a month ago #Permalink
Hello,

the site is online, now.

Thank you

Paul Frankowski - Staff

More than a month ago #Permalink
It means that I had old URL, please light me.

stq74

More than a month ago #Permalink

Paul Frankowski - Staff

More than a month ago #Permalink
All is clear now:
http://foyer.tempo-globuleweb.fr/images/testlogo.jpg

your "mobile" logo has BIG WHITE TALE !
Look at my screenshot, crop your logo image as I shown and upload again.

Attachments (1)

  • logo-crop.png
    logo-crop.png 5.2 KB

Paul Frankowski - Staff

More than a month ago #Permalink
BTW
Upload also favicon (16 x 16 px) for website (yes, also from Template settings)

stq74

More than a month ago #Permalink
error on my part, it was a test logo, on the other hand it remains cut always under mobile.
Thanks also for the favicon, I am currently building the site, I put it online only for you.

stq74

More than a month ago #Permalink
The current logo makes 97px X 76px

Paul Frankowski - Staff

More than a month ago #Permalink
so I guess, solved.

stq74

More than a month ago #Permalink
No, the logo is always cut in a mobile version.

Capture d’écran 2017-09-01 à 22.00.51.png

Attachments (1)

  • Capture d’écran 2017-09-01 à 22.00.51.png
    Capture d’écran 2017-09-01 à 22.00.51.png 178.7 KB

Paul Frankowski - Staff

More than a month ago #Permalink
For mobile resolution use only this:

@media only screen and (max-width: 480px) {
#sp-header #sp-logo .logo { height: auto; top: 0; left: 5px;}
}

Paul Frankowski - Staff

More than a month ago #Permalink
Whole rest you can delete

Attachments (1)

  • del.png
    del.png 5.7 KB

stq74

More than a month ago #Permalink
Super, but on mobile when I reload the page the header is reduced and again cut the logo, can we make the header remain at 76 px height?

Paul Frankowski - Staff

More than a month ago #Permalink
Maybe you have to check your custom CSS ...someone added too many rules.
Now it should corrected because logo has different size.
You know about which line I am talking about right?
#sp-header .logo img {
width: 97px;
}

Delete and below use


@media screen and (max-width: 380px) {
#sp-header .logo img {
width: auto;
max-height: 50px;}

}

stq74

More than a month ago #Permalink
Hello,

for the mobile cest ok, what bothers me is that at the rotation of the screen the header does not resume its initial size, we are forced to refresh the page.

For tablets by cons is not ok:

Attachments (3)

  • Capture d’écran 2017-09-02 à 09.41.14.png
    Capture d’écran 2017-09-02 à 09.41.14.png 406.1 KB
  • Capture d’écran 2017-09-02 à 09.41.19.png
    Capture d’écran 2017-09-02 à 09.41.19.png 374.4 KB
  • Capture d’écran 2017-09-02 à 09.41.29.png
    Capture d’écran 2017-09-02 à 09.41.29.png 309.9 KB

Paul Frankowski - Staff

More than a month ago #Permalink
You have to set max-height for logo for each resolution.
You had in custom.css before, so you know it.
Only height, nothing more.

stq74

More than a month ago #Permalink
So I added this rule for 800x600px resolution

@media screen and (min-width: 800px) {
#sp-header .logo img {
max-height: 76px;
}
}
and my logo is distorted:

Attachments (1)

  • Capture d’écran 2017-09-02 à 11.00.31.png
    Capture d’écran 2017-09-02 à 11.00.31.png 294.4 KB

Paul Frankowski - Staff

More than a month ago #Permalink
Again, guess why.... :0)
after max-height add: "width: auto;"


@media screen and (min-width: 800px) {
#sp-header .logo img {
max-height: 76px;
width: auto; }
}


Et va bien

stq74

More than a month ago #Permalink
Thank you, thank you and thank you again for your help.
It really makes me read css manuals :)
Good day to you

Paul Frankowski - Staff

More than a month ago #Permalink
You're welcome.
Believe me, even I have to read about CSS all the time.


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

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 111
Toufiq

Toufiq

Total Accepted Answers: 86
Mehtaz Afsana Borsha

Mehtaz Afsana Borsha

Total Accepted Answers: 70
Ofi Khan

Ofi Khan

Total Accepted Answers: 48
Rashida Rahman

Rashida Rahman

Total Accepted Answers: 36

121

Templates

315203

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us