1. Forrest Gump
  2. Sherlock Holmes
  3. Commercial Templates
  4. Saturday, 30 March 2019
  5.  Subscribe via email
Hello,
I would like the background image not to be displayed in the mobile view (module-position: Top-2 Background Image and Bottom-2 Background Image). I tried this code:

@media only screen and (max-width: 959px) {
#buttom-2 {
background-image: none;
}}

But that does not work, what am I doing wrong?
Thanks & greetings
forrest
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Forrest,

I saw your post and wondered if you have a typo?
#buttom-2 instead of #bottom-2

Good luck!
Suzanne
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Suzanne,

ups, thanks a lot :)
But unfortunately that did not change anything. I've tried: #bottom_2, bottom_2, #bottom-2, bottom-2

:-/

many greetings
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Forrest,

I am trying to work out something similar at the moment too (I don't have the Juliet template).

On the demo there looks to be an image in the top 3 row but I cannot see one in the top 2 row:

#container_top3_modules {
background-image: url(/demo/0153/images/top-3-bg.jpg);
}


This image:
https://www.joomla51.com/demo/0153/images/top-3-bg.jpg

If I do this it disappears for me:

#container_top3_modules {
background-image:none;
}




If you mean the family group at the bottom of the Juliet demo it seems to be in the bottom module row:


#container_bottom2_modules {
background-image: url(/demo/0153/images/testimonials_bg.jpg);
}


That is this image:
https://www.joomla51.com/demo/0153/images/testimonials_bg.jpg

When I changed the code to the following it disappeared


#container_bottom2_modules {
background-image: none;
}


Perhaps you could try something like that with the @media only screen code?
Good luck!
  1. more than a month ago
  2. Commercial Templates
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
Hello suzanne,
thanks for your effort, but that does not change anything. I'm still doing something wrong :-/
Many greetings
  1. more than a month ago
  2. Commercial Templates
  3. # 4
Accepted Answer Pending Moderation
0
Votes
Undo
Hello

Suzanne's suggestion here should work for you. So in total...

@media only screen and (max-width: 959px) {
#container_top3_modules {
background-image:none;
}}


Considering priority in the CSS you may need to add an !important...


@media only screen and (max-width: 959px) {
#container_top3_modules {
background-image:none !important;
}}


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 5
Accepted Answer Pending Moderation
0
Votes
Undo
If the above fails may I suggest including a URL to the related page and we will examine the issue further.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 6
Accepted Answer Pending Moderation
0
Votes
Undo
Hello Suzanne and Ciaran,

thanks a lot! The "important" was the solution - it worked with this code:

@media only screen and (max-width: 959px) {
#container_bottom2_modules {
background-image:none
!important;
}}

Many greetings
  1. more than a month ago
  2. Commercial Templates
  3. # 7
Accepted Answer Pending Moderation
0
Votes
Undo
:D
  1. more than a month ago
  2. Commercial Templates
  3. # 8
  • Page :
  • 1


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