We’re with you. JoomShaper is offering a 20% Discount on all plans due to the impact of COVID-19.

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

Your Time: Our Time:

Logo in reponsive mode (iPhone) not shown

Featured Lock Resolved Bug
Hi,

i did'nt know where i can control the logo for repsonsive mode. When i check the site on iPhone no logo is visible.

Attachments (1)

  • Image-1.jpg
    Image-1.jpg 72.9 KB

22 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
In general it would be great to load smaller image (different shape) for mobile and retina.

But below may help


@media screen and (max-width: 480px) {
#sp-header .sp-retina-logo {
max-height: 75px !important;}
}

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
have you put logo in "Logo Retina" field ??

it's for iphones,
Mobile is for Android.

h_yoda

More than a month ago #Permalink
Hi

sorry, i forgot these !thanks!
Now after have selected the images, the logo is showed, but not in complete.
How to fix that?

Attachments (1)

  • bug_Image-1.jpg
    bug_Image-1.jpg 132.3 KB

Paul Frankowski - Staff

More than a month ago #Permalink
Is okay now?

h_yoda

More than a month ago #Permalink
No, is not okay

Paul Frankowski - Staff

More than a month ago #Permalink
But you should upload screenshot to show me what is wrong.

have you used my css code?

h_yoda

More than a month ago #Permalink
Hi,

here you can see.If you compare it with the desktop version you see that is it not a circle. Scrolling is not looking nice as well. Please check also the ipad version by scrolling down.
https://www.kunterbude.de/
Of course, I am using a smaller image.
Is it possible to choose different image sizes for iPad an iPhone?
Greeting

Attachments (2)

  • Image-1-1.jpg
    Image-1-1.jpg 165.9 KB
  • Image-1-3.jpg
    Image-1-3.jpg 592.8 KB

Paul Frankowski - Staff

More than a month ago #Permalink
Is it possible to choose different image sizes for iPad an iPhone?

In theory yes, You have tow create different addon for tablet/desktop and mobile.

----
Below code should fix slider design in tablet (add inside custom.css file, at the end):


@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {

.sppb-slider-wrapper.varition-animation .slider-img img.slide-girl
{left: 0; max-height: 350px; }

.sppb-slider-wrapper.sppb-slider-fullwidth-wrapper .sppb-slideshow-fullwidth-item-bg .sppb-slideshow-fullwidth-item-text .sppb-fullwidth-title
{font-size: 50px;}

.sppb-slider-wrapper.varition-animation .slider-img
{position: relative;left: auto;right: auto;height: auto;width: auto;}
}


h_yoda

More than a month ago #Permalink
Thanks,

but the code does not fix the problem.
Also the pictures are not centerd in vertical alignment (normal and responsive mode)

Paul Frankowski - Staff

More than a month ago #Permalink
Below CSS code should fix slider design on most smartphones :


@media only screen and (max-device-width: 680px) {
.sppb-slider-wrapper.varition-animation .slider-img img.slide-girl
{width: 100% !important; left: 0; max-height: 350px;}

.sppb-slider-wrapper.varition-animation .slider-img
{width: 100%; position: relative;left: auto;
right: auto;top: 0;height: auto;width: auto;}

.sppb-slider-wrapper.sppb-slider-fullwidth-wrapper .sppb-slideshow-fullwidth-item-bg .sppb-slideshow-fullwidth-item-text .sppb-fullwidth-title
{font-size: 40px;}
}

h_yoda

More than a month ago #Permalink
Hi,

i tried, but as you see on screenshot the images and the font-size are to big as well
Greetings

Attachments (1)

  • PNG-Bild.png
    PNG-Bild.png 153.8 KB

Paul Frankowski - Staff

More than a month ago #Permalink
Hey,
You should put both CSS codes !!!

first was for tablet
and 2nd for mobile !!!

---
Please, respect my time

Paul Frankowski - Staff

More than a month ago #Permalink
For mobile (iphone/android) look OK.
Remember to refresh mobile browser 3x

iphone.jpg

Attachments (1)

  • iphone.jpg
    iphone.jpg 79.1 KB

h_yoda

More than a month ago #Permalink
Thanks, i copied both now, but the result is the same. Do you test the screen size with firefox webdeveloper plugin? There i got a a correct view, but with the ipad air2 and iphone it looks different.

Attachments (2)

  • PNG-Bild 2.png
    PNG-Bild 2.png 42 KB
  • PNG-Bild.png
    PNG-Bild.png 153.8 KB

Paul Frankowski - Staff

More than a month ago #Permalink
iphone 5, 6, 7 , 8, X ???

Paul Frankowski - Staff

More than a month ago #Permalink

/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {

.sppb-slider-wrapper.varition-animation .slider-img img.slide-girl
{width: 100% !important; left: 0; max-height: 350px;}

.sppb-slider-wrapper.varition-animation .slider-img
{width: 100%; position: relative;left: auto;
right: auto;top: 0;height: auto;width: auto;}

.sppb-slider-wrapper.sppb-slider-fullwidth-wrapper .sppb-slideshow-fullwidth-item-bg .sppb-slideshow-fullwidth-item-text .sppb-fullwidth-title
{font-size: 34px;}
}





click refresh button 3x !!! on iPhone

Paul Frankowski - Staff

More than a month ago #Permalink
if font is too big, just change
{font-size: 40px;}

to smaller value

{font-size: 32px !important;}


or maybe 28px, or 24px

h_yoda

More than a month ago #Permalink
iPhone 7. I click refresh many times.
The iPad view is the main problem. And still the problem exist. Also the logo in sticky-header mode is looking bad.

Paul Frankowski - Staff

More than a month ago #Permalink
Hopefully, on my HTC, Xiaomi Mi -- mobile slider is fully okay. Tested.

sorry, I do not have iphone to check on alternative phone.

You do not see any differences, how is this possible ???
In both Portrait and Landscape ???
Apple , brrrr....

Paul Frankowski - Staff

More than a month ago #Permalink
what is wrong with logo, please upload screenshot.

Paul Frankowski - Staff

More than a month ago #Permalink
Okay, about iPhone, please add also this extra code (last hope)


/* ----------- iPhone 6, 6S, 7 and 8 | Safari ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {

.sppb-slider-wrapper.varition-animation .slider-img img.slide-girl
{width: 100% !important; left: 0; max-height: 350px;}

.sppb-slider-wrapper.varition-animation .slider-img
{width: 100%; position: relative;left: auto;
right: auto;top: 0;height: auto;width: auto;}

.sppb-slider-wrapper.sppb-slider-fullwidth-wrapper .sppb-slideshow-fullwidth-item-bg .sppb-slideshow-fullwidth-item-text .sppb-fullwidth-title
{font-size: 33px;}
}




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

124

Templates

331408

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