Media query css override desktop css

HTML & CSS
1

Hi, I have created responsive website . In that media query 480px css is overwrite normal desktop css
Why ? For example normal css i wrote text align right and 480px text align center but text align center only taking all resulation and this in inside of i frame …how to solve this Please help …

2

That sounds like normal behaviour in a “desktop first” responsive design, that’s what a media query is for.
Can you describe the problem in more detail? Maybe with some code examples.

2 Likes
3

Normal css:
.calendar-create .action-btn-wrapper {text-align: center;}

Media query:
@media screen and (max-width:480px){
.calendar-create .action-btn-wrapper {text-align: center;}
}

4

Normal css:
.calendar-create .action-btn-wrapper {text-align: right;}

Media query:
@media screen and (max-width:480px){
.calendar-create .action-btn-wrapper {text-align: center;}
}

5

The css in the query looks the same as the “normal” css, so it should not make any difference and is redundant.

6

Hi Sam,

sorry i wrote wrong please see below :

Normal css:
.calendar-create .action-btn-wrapper {text-align: right;}

Media query:
@media screen and (max-width:480px){
.calendar-create .action-btn-wrapper {text-align: center;}
}

7

The query changes the text alignment, is that not what you wanted?

8

When you browser width is less than 480px

9

Actually i want normally right side that content and responsive center that content.

But not its coming all resulation in center this is problem.

10

Do you have a test page we could look at, @ayyappan? Otherwise, your full HTML and CSS for that page would be helpful, to see what’s actually happening.

1 Like
11

Are you wanting to style the iframe or what’s inside of the iframe?

1 Like
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.