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
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. # 1
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. # 2
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. # 3
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. # 4
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. # 5
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. # 6
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. # 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!

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.