Changing the .round-div Color Results in Distortions

  • Resolved wittyoctopus

    (@wittyoctopus)


    11 years, 3 months ago

    Ok, one more question for today. I hope…

    I want to change the entire background of the website to a uniform white. While I was able to do this easily for the basic background, that still left the .round-div objects to be rendered in white as well. If they are not rendered in white you get the distortion seen here.

    Following the advice in this thread, I input the following code into my style.css file:

    .round-div {
  border: 104px solid #E0FFC1;
}

    However, as was brought up in the aforementioned post, an odd distortion occurs around the featured “photos” when the webpage is resized to “iPad/iPhone” size. Basically the circle is cut off on the right hand and bottom sides. Resulting in a chopped up circle. This only occurs when the page is sized down.

    I think I figured out why this was happening, I just don’t know how to prevent it. The code for changing the .round-div is spot on. Here is what the code looks like in its original form:

    .round-div {
    display: block;
    transition: all 0.3s ease 0s;
    position: absolute;
    width: 170px;
    height: 170px;
    z-index: 99;
    border-radius: 900px 900px 900px 900px;
    border: 104px solid #E0FFC1;
    top: -66px;
    left: -54px;
}

    What happens to the best that I can see using “Inspector” in Firefox, is that portions of the above code are supplanted by:
    blue.css: 8346 

    @media (max-width: 976px)
.round-div {
    width: 150px;
    height: 150px;
    border: 94px solid #E0FFC1;
    top: -49px;
    left: -67px;
}

    Which as best as I can tell the top line is telling the code to supplant the original when the maximum width of the page reaches 976 pixels.

    My question is how can I change the above code in both places merely using my Child Theme in order to change the color? Is that even possible, or would I need to make a total copy of the original style.css and make individual changes to both subsections of the code. Thank you again for all the advice and help that has been posted throughout these forums. it has been invaluable.

Viewing 6 replies - 1 through 6 (of 6 total)

  • You can add your own

    @media (max-width: 976px)
.round-div {
...
}

    section in your child theme.

    Thread Starter wittyoctopus

    (@wittyoctopus)

    While it is undeniable that I am most likely going about this all sorts of wrong, I attempted to input the following code into my Child Theme; however, it did not change the situation. It seems that no matter what I tried once I input the first line it overrode anything that followed.

    .round-div {
  border: 104px solid white;
}

@media (max-width: 976px)
.round-div {
    border: 94px solid white;
}

    As I am completely new at this I’m pretty sure I am doing something wrong, or missing some vital code language. It may be important to note that in the original code the “@media (max-width: 976px)” appears about 40 or so lines above the “.round-div {border: 94px solid #E0FFC1;}” I also tried the above in multiple combinations, but whichever .round-div I put in first took precedence.

    Also scouring through the code there are multiple references to .round-div and border, I don’t know if I should be trying to change them all or just those two. In inspector those were the only two that came up as impacting the look of that one section of the site. Then again I would not be shocked to learn I’m missing something here.

    Thanks again for all the help.

    You’re missing the extra brackets to enclose the media query (so you can put multiple rules in there):

    @media (max-width: 976px) {
  .round-div {
      border: 94px solid white;
  }
}

    Thread Starter wittyoctopus

    (@wittyoctopus)

    @electricfeet, thanks worked like a charm, everything seems to be resizing correctly now. Thanks for pointing an absolute noob in the right direction.

    You may be an “absolute noob”, but I’m a “relative noob”, for sure ??

    If you’re messing about with @media, you might find this useful (see (currently) last post). I’m really happy I found it ??

    Just like to thank you both.
    This help me out too. I’ve been fighting with this problem for a couple of days.. along with other things !! ??
    Thanks again

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Changing the .round-div Color Results in Distortions’ is closed to new replies.