Hi. Hope you are fine.
I have a question for you.
I’m trying to make a pseudo-element (::after) responsive.
I just want to show another picture on mobile version.
But it has a very strange behaviour, which doesn’t allow it to work.
Actually, it adds brackets.
&::after[] {
content: url('./../../img/home/mobile.png');
}
Please, see the attached screenshots (CSS and SCSS).
Why does it happen? Is something wrong with my code?
Thank you very much in advance,
Helena
Hi Helena,
IDK why your text formatter is adding the brackets but in CSS [ ] is and attribute selector…
e.g. a[title = 'example'] { color: purple;}
(any anchor tag with title = 'example' attribute)
So… having a blank ::after[ ] will not match anything at all. (CSS identifier expected).
Also your url file path looks incorrect.
Usually you use two dots ../ to indicate:
- go up to the parent folder of the current folder
- follow the path down
For example lets say your current path is "/website/pages/index.html"…
then "../images/picture.png" is equivalent to "website/images/picture.png"
If making those change doesn’t work try to debug it by:
- check
@media works by adding body{ background-color: red;}
- check
@media -> ::after works with:
.img_negative_picture::after{ background-color: red;}}
- add another picture to the same folder as your current page and check your url
If you have any dramas jump back on…
1 Like
Hi, @steve.mills . Thank you very much for your answer.
I tried all your suggestions, nothing helped.
But, I’ve found what was wrong. Usually, when we are writing media-queries, we just write the parameters that will be different on mobile/tablet. But, in this case, I had to write “position:relative;” once again for the parent-element, even it was written already. So, I had to write it twice, even if it doesn’t change on mobile/tablet. Once, it was done, it does work perfectly.
Thank you very much for your help.
1 Like
