Help with opacity

Help with opacity
0

#1

I’m working on the weather api, which you can see here --> https://codepen.io/Mike-was-here123/full/oGWxam/

Is their anyway i can keep my main part (box that holds everything) with a opacity of 0.7 (The main section that holds everything is .parent),

Yet keep my text inside the main box bold at a opacity of 1.0 . Basically my background will be transparent with opacity, yet keep my text bold and non-transparency.

I wouldn’t care if its just a one line of css code that i have to put into every text css class. :wink:

Any help is appreciated :slight_smile:


#2

Apply background-color: rgba(234, 243, 249,0.7) to .parent and remove opacity:0.7
Hope it helps :grinning:


#3

If you set the main container at opacity .7, everything inside it will be .7, it can’t logically be any other way. Opacity is a blunt tool.

So set the opacity (alpha channel) on the background colour of the main container, ie as rgba(a,b,c,.7) where a, b, and c are r, g, b colour values (like rgba(100,100,100,.7))


#4

Not sure, but perhaps if you played around with z-index. you could set it to be higher for your text only?

On another note, I suggest you fix some typos:
It should say: " no errors, you’re all good!"

And “total clouds” doesn’t really convey what it is; cloud coverage would be more accurate. That number should be a percentage (ex: cloud coverage 80%).

Other than that it looks great! Nice work!


#5

Okay thanks, junaid07 got the answer to that, ill fix my clouds. Thanks a lot.

Lol i spelled errors wrong on purpose as a joke, ill fix it now :slight_smile:


#6

Thanks ill keep that in mind


#7

Hehe, ok so you fixed errors, but it still says your instead of you’re.
And for cloud coverage you wrote covarge…oops!
For people like me (attentive to detail), typos can be a real turn off when evaluating someone’s work.
If you want to do professional work, good spelling and grammar are two VERY important things to pay attention to.

I missed something the first time around - your broken clouds line overlaps other text at certain smaller screen widths.


#8

Lol thanks ill fix my grammar :grinning:

What screen widths is this?


#9

I can’t tell in codepen, but just narrow the viewport and you’ll see it doesn’t look right.
Evrything else looks great which is why it stands out.


#10

How do i edit my viewpoint?


#11

In Codepen, change the view to editor view so that the editor is on the side, then just widen the editor as much as you want.
At some point broken clouds is no longer in its own column and goes below other text. At that point you’d want broken clouds to be consistent with the other weather variables above it.


#12

Okay, i added code that displays your width and height

But it doesn’t account for the viewpoint :l


#13

These kinds of little things are what make responsive design a pain in the ass. I sometimes wish mobile phones didn’t exist so that we could just design for desktops. :roll_eyes:


#14

Lol same. I don’t see any overlapping, but i;m on a 1920 x 1080 monitor, so its hard to tell. Ill use my phone.


#15

Don’t you ever use developer tools in your browser?
You could easily play around with different screen sizes.
I went to full view - at less then 1462px the problem arises.


#16

How to use developer tools?

for screen size