Support Forums

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

Your Time: Our Time:

CSS for Landscape Mobile.

Featured Lock Resolved Issue
Hello, I have these problems (see file):

1) How I center white text ?

2) How I shift down button ?

3) How I shift down title ?

Only for landscape mobile.
Thanks.

Attachments (1)

  • ERROR.PNG
    ERROR.PNG 322.9 KB

21 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
from my side I need URL with sub-page where you have those "problems", please

MyDesignShop

More than a month ago #Permalink
Hi,
from my side I need URL with sub-page where you have those "problems", please

I send you a MP.
Thanks.

Paul Frankowski - Staff

More than a month ago #Permalink
thanks, checking...

Paul Frankowski - Staff

More than a month ago #Permalink
It may help at least some:

@media (min-width: 460px) and (max-width: 640px) {
#sppb-addon-1510031871565 p {text-align: center;}
.sp-page-builder .page-content #section-id-1499336489844
{ margin-top: 10px !important;padding-top: 0 !important; }
.sp-page-builder .page-content #section-id-1510031871501
{ padding-top: 200px !important; padding-bottom: 60px !important; }
#sppb-addon-1510031871566 {margin: 0 0 0 10px !important;}
}

MyDesignShop

More than a month ago #Permalink
It may help at least some:

@media (min-width: 460px) and (max-width: 640px) {
#sppb-addon-1510031871565 p {text-align: center;}
.sp-page-builder .page-content #section-id-1499336489844
{ margin-top: 10px !important;padding-top: 0 !important; }
.sp-page-builder .page-content #section-id-1510031871501
{ padding-top: 200px !important; padding-bottom: 60px !important; }
#sppb-addon-1510031871566 {margin: 0 0 0 10px !important;}
}

Not function ...

I insert code below but not function too.

@media (min-width: 400px) and (max-width: 767px) {

#sppb-addon-1510031871565 {
margin: -100px 20px 150px 250px;
}
}

Paul Frankowski - Staff

More than a month ago #Permalink
But I don't see my code inside your CSS section, so how I can check :( on my device or browser ?

Beside have you checked on :: http://quirktools.com/screenfly/
to confirm CSS code.

Paul Frankowski - Staff

More than a month ago #Permalink
Extra tip

iPhone 6 in landscape


@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape) { .... }

MyDesignShop

More than a month ago #Permalink
Extra tip

iPhone 6 in landscape


@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape) { .... }


I insert:

@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape) {

#sppb-addon-1510031871565 {
margin: -100px 20px 150px 250px;
}
}

But not function.

MyDesignShop

More than a month ago #Permalink
No reply ?? :(
With your code not function for iPhone 6 for landscape.

Paul Frankowski - Staff

More than a month ago #Permalink
maybe because you forgot to put !important

@media only screen -- is general rule, not discovered by me.

MyDesignShop

More than a month ago #Permalink
maybe because you forgot to put !important

@media only screen -- is general rule, not discovered by me.

Thanks for your reply ... but with my iPhone X Landscape I view my site correctly while if I use Screenfly for Iphone 6/7 Plus Landscape view is not correctly. Why this ?
Thanks.

Paul Frankowski - Staff

More than a month ago #Permalink
probably you have to use bigger value, sorry, It's not my fault that you forget to tell me that you have huge iPhone. Small detail, make difference.
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Anyway...
Because it's retina extra rule needed.

Use of of those to put your custom css:



/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
{
here-your-code
}



/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape)
{
here-your-code
}





MyDesignShop

More than a month ago #Permalink
probably you have to use bigger value, sorry, It's not my fault that you forget to tell me that you have huge iPhone. Small detail, make difference.
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Anyway...
Because it's retina extra rule needed.

Use of of those to put your custom css:



/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
{
here-your-code
}



/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape)
{
here-your-code
}






I insert this code:

@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {

#sppb-addon-1510031871565 {
margin: -100px 20px 150px 250px !important;
}
}

Screenfly for Iphone 6/7 Plus Landscape view is not correctly. Try it too ... :(

Paul Frankowski - Staff

More than a month ago #Permalink
sorry, probably you have to talk with front-end developer in that case.

MyDesignShop

More than a month ago #Permalink
sorry, probably you have to talk with front-end developer in that case.

You can't help me ? But it's a Template problem ...
I insert code in Custom CSS to template.

#sppb-addon-1510031871565 is correct ?

Paul Frankowski - Staff

More than a month ago #Permalink
use Code Inspector from your browser and check.
Make simulations.
https://www.joomshaper.com/blog/which-line-of-css-i-have-to-edit-code-inspector-in-action
-----

Your question is not about basic settings, but customization, it's not how to turn on/off option.

MyDesignShop

More than a month ago #Permalink
use Code Inspector from your browser and check.
Make simulations.
https://www.joomshaper.com/blog/which-line-of-css-i-have-to-edit-code-inspector-in-action
-----

Your question is not about basic settings, but customization, it's not how to turn on/off option.

To Code Inspector is:

#sppb-addon-1510031871565 and inline:2 @(max-width: 767 px)

Paul Frankowski - Staff

More than a month ago #Permalink
Line 2 - mean it's inline code probably from sppb, so it has to be override.

----
Anyway
have you centred "white text" (1) at least, -- this was very easy with @media rules from css-tricks.com guide.

---
BTW
I wish that our Page Builder have more breakpoints, like bootstrap 4 have now, but it was developed when bootstrap 3 was on the market. And nobody heard about iPhone X yet.

MyDesignShop

More than a month ago #Permalink
Line 2 - mean it's inline code probably from sppb, so it has to be override.

----
Anyway
have you centred "white text" (1) at least, -- this was very easy with @media rules from css-tricks.com guide.

---
BTW
I wish that our Page Builder have more breakpoints, like bootstrap 4 have now, but it was developed when bootstrap 3 was on the market. And nobody heard about iPhone X yet.

But it really that JoomShaper Team can't help me ? I really must call a front-end developer ?
There is no solution ?
Anyway thanks for your patience.

Paul Frankowski - Staff

More than a month ago #Permalink
personally, I cannot .. sorry.

I have some mobile devices (smartphones, tablets), but not all... so I cannot check & help. :(

MyDesignShop

More than a month ago #Permalink
personally, I cannot .. sorry.

I have some mobile devices (smartphones, tablets), but not all... so I cannot check & help. :(

Thanks again for your patience.
Probably sorry but I will change template.
Bye.


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: 135
Sifat

Sifat

Total Accepted Answers: 86
Toufiq

Toufiq

Total Accepted Answers: 53
Pavel

Pavel

Total Accepted Answers: 6
Rifat Wahid Alif

Rifat Wahid Alif

Total Accepted Answers: 5

114

Templates

293113

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