-
Posts
-
Hi Enfold,
I got a situation here, need a hand please.
I use custom css as following:#top .av_header_glassy.av_header_transparency #header_main { background-color: rgba(34, 34, 34, 0.6); border-color: rgba(245, 255, 255, 0.2); border-bottom-width: 2px; border-top-color: transparent;And
@media only screen and (max-width: 843px){ #top .av_header_glassy.av_header_transparency #header_main { border-color: rgba(156, 156, 156, 0.4); border-top-color: transparent; background-color: rgba(34, 34, 34, 0.06); }But somehow the sreen-width between 844-927px, the same selector are control by the
next code I post here.while I change the first code into
@media (min-width: 844px) {#top .av_header_glassy.av_header_transparency #header_main { background-color: rgba(34, 34, 34, 0.6); border-color: rgba(245, 255, 255, 0.2); border-bottom-width: 2px; border-top-color: transparent;}
whole thing got messed up.
almost everything I set in the following code doesn’t work any more@media only screen and (max-width: 767px) { .av_header_transparency #advanced_menu_toggle { background-color: #ffffff; color: #a90d0d; border-color: #a90d0d; }I hope I am not making things too complicated.
Please give me some suggestions, please!Hey Vision,
Please post a link to where you are applying this CSS to and point out what is wrong in a screenshot, you can upload to a service like google drive or dropbox and then link to it here.
Best regards,
RikardHi,
Thanks for the link to your site, though it’s difficult to understand your problem by only reading CSS, could you post a screenshot highlighting the problem also please?
Best regards,
RikardOK, Please take a look of these photos:
The header color works perfectly when the screen size is larger than 927px.
But in the area between 844-926px, the background color turns into transparent (please check the link i provide).
Can I give them a same background color (like the color when the screen size is larger than 927px)?
In the same time, I hope the code won’t affect the background color of the header toggle under 843px.
I hope it’s clear now, thank you so much!Hi,
Your both codes are missing a closing curly brackets. It should be as following
#top .av_header_glassy.av_header_transparency #header_main { background-color: rgba(34, 34, 34, 0.6); border-color: rgba(245, 255, 255, 0.2); border-bottom-width: 2px; border-top-color: transparent; } @media only screen and (max-width: 767px) { .av_header_transparency #advanced_menu_toggle { background-color: #ffffff; color: #a90d0d; border-color: #a90d0d; }}Best regards,
YigitI use:
@media only screen and (max-width: 843px) { #top .av_header_glassy.av_header_transparency #header_main { background-color: rgba(34, 34, 34, 0);} }But somehow it also controls the region between 844-927px, and dominate my another code:
#top .av_header_glassy.av_header_transparency #header_main { background-color: rgba(34, 34, 34, 0.6) }the difference is the transparence of the header background.
Hi greatliona,
Here is the look between 844-927px, the rules are applied from dynamic_avia, is this the way you intended it to look or do you need to change something else here?
Best regards,
VictoriaVictoria
Looks right on your device but not mine both on laptop and iPad.
So what’s wrong could this be?
Many thanks!I use:
@media only screen and (max-width: 843px) { #top .av_header_glassy.av_header_transparency #header_main { background-color: rgba(34, 34, 34, 0);} }But somehow it also controls the region between 844-927px, and dominate my another code
Then you need to create a code for screen size between 844-927px obviously :). In your code above you’re just using a screen size until maximum 843px, but nothing beyond that. So just adjust your media queries, to something like:
@media only screen and (min-width: 844px) and (max-width: 927px) { #top .av_header_glassy.av_header_transparency #header_main { background-color: rgba(34, 34, 34, 0); } }and adjust as needed.
Best regards,
AndyUm….
Actually I don’t want the code to have control between 844-927px.
So is it necessary to make another media query to define the range?
Or is it conflicting with each other if I make some range overlap?Hi,
if you don’t want to control it for this screen size, then it’s not necessary to do it. If it doesn’t look good though, then you want to control it obviously.
Best regards,
AndyOh! Let me make this right… sorry for my bad expression.
I mean I don’t want the code to control the range 844-927px, and that’s why I hold it less than 843px.
My question should be…
Is it still have effect on the range because I didn’t define the range larger than 843px?
Is it necessary for CSS coding to define every range once you apply a media query on some specific selector?
I hope I make myself clear. Thank you so much.Hi,
Looks right on your device but not mine both on laptop and iPad.
What is the actual model of you iPad and laptop? I’m asking because there’s a chance that you have a device with retina display. This is the correct css media query for iPad devices.
// http://stephen.io/mediaqueries/
To target devices with retina display, refer to this link.
// https://css-tricks.com/snippets/css/retina-display-media-query/
Best regards,
Ismael.Hi, Ismael
my devices are iPad 3 and macbook pro 15″ (later 2011), seems like I need to do specific code to target my device.
Thanks!
- You must be logged in to reply to this topic.