Styling code for images not working?

Question

0.00/5 (No votes)

See more:

I was styling some images in sass as nothing is happening to them even that code is compiled in css too.

This the html portion of that images.

<div class="composotion">

      <img src="img/nat-1-large.jpg" alt="Photo 1" class="composition_photo composition_photo--p1">

      <img src="img/nat-2-large.jpg" alt="Photo 2" class="composition_photo composition_photo--p2">

      <img src="img/nat-3-large.jpg" alt="Photo 3" class="composition_photo composition_photo--p3">

  </div>

Now, the sass portion of those images.

.composotion {

   position: relative; 

   &__photo {
       width: 20%;
     
       position: absolute;

       

       &--p1 {
        left: 0;
        top: -2rem;


    }

    &--p2 {
        right: 0;
        top: 2rem;


    }

    &--p3 {
        left: 20%;
        top: 10rem;


        }

   
}
}

And still nothing is working.Please help me so i can get out of this river.

What I have tried:

I tried to change every thing the code and when i remove everything except the width then it works a little bit but not wholly ...

Posted 11-Sep-18 15:40pm

UbaidParvez

Updated 13-Sep-18 9:58am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2018-09-13T09:59:00

The compiled CSS is:

CSS

.composotion {
  position: relative;
}
.composotion__photo {
  width: 20%;
  position: absolute;
}
.composotion__photo--p1 {
  left: 0;
  top: -2rem;
}
.composotion__photo--p2 {
  right: 0;
  top: 2rem;
}
.composotion__photo--p3 {
  left: 20%;
  top: 10rem;
}

Note the double underscores in the photo class names. Your HTML only has a single underscore.

Either change &__photo to &_photo, or change your photo class names to match the generated class names - eg: class="composition__photo composition__photo--p1"