0

So what I am doing is using bootstrap and cards, what I want to do is to make a background color stretch all the way to the edges of the webpage see photo attached: [1]:https://i.stack.imgur.com/xTAgD.jpg[How the code looks like right now in browser][1] but as you can see from the photo, the background color doesn't stretch to the edges of the page, it stays as long as the card, if I try to make the card wider, it won't look alright on phones.. I did try to use css to stretch the card container all the way to the edges of the webpage but then when the site is viewed from a phone, it doesn't look right ... I'm brand new to coding, this is my second website I am trying to build so please don't be too harsh with me :\ Maybe some of you have a suggestion

      <div class="row">
          <div class="card mb-3" id="cardcontainer">
            <div class="row g-0">
              <div class="col-sm-8">
                <div class="card-body" id="guess">
                  <h5 class="card-title text-center">Let me guess</h5>
                  <p class="card-text">You are here because you are looking for your Greater Manchester 
                    Wedding Photographer (or because I forced you to have a look)

                    Hi, I’m Alex from Alex Sthali Photography. I’m a multi-award-winning Greater 
                    Manchester Wedding Photographer. I am based between Manchester and Wigan (but cover all of the UK), and specialise in wedding photography. I offer a high quality, professional photography service documenting your wedding day with photography that reflects who you are as a couple. I want to tell the story of your day as it happens, all the little details, all the laughs and smiles.</p>
                  
                </div>
              </div>
              <div class="col-sm-4">
                <img src="./Img/Linkedin2.png" alt="...">
              </div>
              
            </div>
          </div>
        </div>
      </div>

And this is the css trying to apply the background color

.container #cardcontainer {
    background-color: rgba(201, 201, 201, 0.6);
    background-image: linear-gradient(rgba(201, 201, 201, 0.6), white);
}

Thank you in advance for the help...

AlexSt
  • 1
  • 1

1 Answers1

0

Something like this is what I've used in the past:

    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    position: relative;
    right: 50%;
    width: 100vw;
Robin
  • 262
  • 2
  • 10