CSS for mobile
Or, how to add a fixed background that will work also on mobile devices?
Hi Kevin,
But how can I add a CSS only for mobile devices?
You can add a CSS with the @media property to assign the styles for the exact screen sizes.
how to add a fixed background that will work also on mobile devices?
Such an option does not work on the mobile devices.
...................................................
Sincerely,
Hella
Nicepage Support Team
Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp
Hi Hella,
I know, that it doesn't work on mobile devices. And that is why I want to know, hot to add two kinds of CSS lines - one for mobile and one for desktops.
Hi Kevin,
As I mentioned above, you can try to use the @media option to specify the code for the desired screen sizes. Here is an article about how it works:
https://developer.mozilla.org/en-US/docs/Web/CSS/@media
...................................................
Sincerely,
Hella
Nicepage Support Team
Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp
OK!
I added:
<code>.back {
background-attachment:fixed;
}
@media (max-width:767px){
.back{
background-image: url("images/53e8dd444a54a914f6da8c7dda793678153bdee757596c48732e7bd2964ac351ba_1280.jpg");
background-position: 50% 50%;
}
}
@media (max-width:575px){
.back{
background-image: url("images/53e8dd444a54a914f6da8c7dda793678153bdee757596c48732e7bd2964ac351ba_1280.jpg");
background-position: 50% 50%;
}
}
in "Edit CSS". And you can see what happened with this code in attachment.
Kevin,
The in the CSS Tab try to add CSS without the
Only the following
.back {
background-attachment:fixed;
}
@media (max-width:767px){
.back{
background-image: url("images/53e8dd444a54a914f6da8c7dda793678153bdee757596c48732e7bd2964ac351ba_1280.jpg");
background-position: 50% 50%;
}
}
@media (max-width:575px){
.back{
background-image: url("images/53e8dd444a54a914f6da8c7dda793678153bdee757596c48732e7bd2964ac351ba_1280.jpg");
background-position: 50% 50%;
}
}
...................................................
Sincerely,
Allen R.
Nicepage Support Team
Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp
Allen,
I copied your code and paste it to "Edit CSS" in Nicepage, but Nicepage again convert it to-> ">
Hi Kevin,
Still looks like you have copied the incorrect code. I have inserted it on my end and nothing is erased. Please copy this one:
.back {
background-attachment:fixed;
}
@media (max-width:767px){
.back{
background-image: url("images/53e8dd444a54a914f6da8c7dda793678153bdee757596c48732e7bd2964ac351ba_1280.jpg");
background-position: 50% 50%;
}
}
@media (max-width:575px){
.back{
background-image: url("images/53e8dd444a54a914f6da8c7dda793678153bdee757596c48732e7bd2964ac351ba_1280.jpg");
background-position: 50% 50%;
}
}
...................................................
Sincerely,
Hella
Nicepage Support Team
Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp
Hi Hella,
Ok. So I prepare a video! In the attachment. I'm waiting for your response :)
Hi Kevin,
Please try with single brackets:
.back {
background-attachment:fixed;
}
@media (max-width:767px){
.back{
background-image: url('images/53e8dd444a54a914f6da8c7dda793678153bdee757596c48732e7bd2964ac351ba_1280.jpg');
background-position: 50% 50%;
}
}
@media (max-width:575px){
.back{
background-image: url('images/53e8dd444a54a914f6da8c7dda793678153bdee757596c48732e7bd2964ac351ba_1280.jpg');
background-position: 50% 50%;
}
}
Does the issue continue?
...................................................
Sincerely,
Olivia
Nicepage Support Team
Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp
Hi Kevin,
Nice to hear that. Feel free to contact us on any occasion.
...................................................
Sincerely,
Hella
Nicepage Support Team
Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp