-
Posts
-
Hi!
I inserted a background image in a color section and I would like it to use a different one on mobile (Private content link1)
I also need to use it in a full width easy slider and need again the image url to be different on mobile (Private content link2)
Thanks!
Hey metamorfic,
If you want greater control over the background in mobile devices I suggest you create another section to show only on mobile and use an image better adapted to that screen size. You can assign unique IDs to your sections and then hide/show them using CSS like this:
@media only screen and (min-width: 768px) { #section-desktop { display:block !important; } #section-phone { display:none !important; } } @media only screen and (max-width: 767px) { #section-desktop { display:none !important; } #section-phone { display:block !important; } }Best regards,
RikardHi Rikard!
This works great but it creates a new problem; the bottom arrow, which link to the next section, doesn’t work on desktop mode because the next section is the phone section which is hidden. How can I change the link of the arrow of the desktop section so it links to the right section below?
Thanks!
Hi,
Ok, thanks for the feedback. Could you try adding an ID to the section below which starts with L’ENTREPRISE please? Try adding next-section to it.
Best regards,
RikardHi,
I think it would be best to try a different approach. So let’s try to provide your color section a different background image on mobile, as your very first idea. Provide your color section in question a unique css class, for example “different-image”. Then use this code inside your Quick CSS field:
@media only screen and (max-width: 767px) { .different-image { background-image: url(https://i.auto-bild.de/ir_img/1/0/7/0/6/8/3/AUTO-BILD-Design-Award-2013-729x486-3727512def17a67a.jpg) !important; }}and adjust the url as needed (as well as media queries if needed).
For more infos about media queries check this here: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Hope this helps!
Best regards,
AndyHey. friends.
I have same problem and now I changed my mind to create a new color section for my mobile version.
However, I don’t know how to deal with CSS that Rikard replied.
Could you tell me what I have to do?
Thanks!!!@ngavy
Please create your own ticket inside our forum, otherwise it gets very confusing here. Send us admin login, so we can have a deeper look into it. Show us exactly about which elements you’re talking about (precise link, screenshots).Best regards,
AndyHi,
Great, glad we could help :-)
Please let us know if you should need any further help on the topic.
Best regards,
RikardHi again!! I used your code for the top section of my site which is working perfectly:
@media only screen and (max-width: 414px) {
#cover {
background-image: url(http://metamorfic.net/dev/JPLD/wp-content/uploads/2016/12/web-top-2.png) !important;
}}But now I want to use it for some other colour section and it doesn’t work using the same code with different section ID. Ca you help?? Should I use css class? How do we add css class instead of ID?
@media only screen and (max-width: 414px) {
#entreprise {
background-image: url(http://metamorfic.net/dev/JPLD/wp-content/uploads/2017/01/dessin1-1.jpg) !important;
}}@media only screen and (max-width: 414px) {
#entreprise-contenu {
background-image: url(http://metamorfic.net/dev/JPLD/wp-content/uploads/2017/01/dessin1-1.jpg) !important;
}}Hi,
you do this by following this tutorial: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
Best regards,
AndyHi!
I’m now working on a new site but still have issues with the same need to change image background of section on mobile.
• First, for the full width easy slider on the top of my site, how can I change the background image of the first slide only? I tried this but it doesn’t work:
@media only screen and (max-width: 767px){
.av_slideshow_full li img {
background-image: url(http://metamorfic.net/dev/tp/wp-content/uploads/2017/03/couvert-web-full.jpg) !important;}}• For the 3 images used as background in colour sections, I used this code which is working on smaller screen on my desktop, but not on my iPhone. Why?
@media only screen and (max-width: 1024px) {
#fixed-bg1 {
background-attachment: scroll!important;
background-position: top left!important;
background-image: url(http://metamorfic.net/dev/tp/wp-content/uploads/2017/04/fond2-2.png) !important;}
}@media only screen and (max-width: 1024px) {
#fixed-bg2 {
background-attachment: scroll!important;
background-position: top left!important;
background-image: url(http://metamorfic.net/dev/tp/wp-content/uploads/2017/04/fond1-2.png) !important;}
}@media only screen and (max-width: 1024px) {
#fixed-bg3 {
background-attachment: scroll!important;
background-position: top left!important;
background-image: url(http://metamorfic.net/dev/tp/wp-content/uploads/2017/04/fond3-2.png) !important;}
}Thanks a lot!
Hi,
Please define a different css media query for iPhone, specially for iPhone 6 and 6+.
// http://stephen.io/mediaqueries/
Best regards,
Ismael
- You must be logged in to reply to this topic.