How to position a div differently for a specific page?


Tags: css,responsive-design

Problem :

I have <div class="rightside"> on every page of my site. It positions a contact form on every page, then at 850 pixels wide screen (for responsive) it hides the contact form with display: none;

@media only screen and (max-width : 850px) {
.rightside {
    display: none;
} 
}

On the contact us page, I would like to make the contact form still available for this page only. How can I change on the contact us page, so the contact form is still available for devices below 850 on contact us but display: none; on every other page ?

UPDATE: I wish to use the attributes from .rightside in my css. I have tried:

<div class="rightside" id="contactpage"> in contact page 

in the media query for 850

.rightside #contactpage  {
   float: left;
}


Solution :

try adding another css style to your code just after the existing one, like this:

<div class="rightside contact"></div>


@media only screen and (max-width : 850px) {
    .rightside {
        display: none;
    }
    .rightside.contact {
        display: block;
        float:right;
    } 
}

    CSS Howto..

    How to give footer background color for the whole width of the browser with fixed parent div

    How do you set a css class attribute with Javascript? [duplicate]

    How do I create a margins on Google maps? [closed]

    How to prevent specific css style sheet from styling a specific html tag

    How to remove the blue border around ImageMap control in the Internet Explorer?

    How to add another text decoration definition with Javascript?

    How can I put my div “downloads” always 70px below my image

    How to make a drop-right menu?

    how to run html$css$js files locally on browser [closed]

    How to get this code to behave differently based on what exactly is clicked?

    How to change the position of image in search box in css?

    How to do something like border-top-left-color. [CSS]

    CSS HTML How to make a larger image than div display in full in div

    How to align multiple columns in bootstrap 3 carousel?

    CSS border - how to populate content inside div with border

    How to identify unused css definitions [closed]

    How to change a lot of img when hover

    How to use overflow-y:auto with child with bottom: 0 and position:absolute?

    CSS: How to scale an image from the center instead of top-left

    How do three.js transforms and CSS3 3D-transforms correspond?

    How to make CSS visible only for Android phone UC browser

    how can I center this menu with CSS

    how do I select second submit button to imply other color

    How to create a loading image sprite using background position

    How to hide content that is not wrapped by tag using only CSS?

    How to remove the circle in the background of the impress.js demo

    meteor: how to use multiple classes in css selector

    How do you disable the set width of parent element for child element?

    css how to stretch center div to fill allowable area

    How to locate Element via CSS Selector/XPath?