CODEWITHSUNDEEP
htmlcss
Diaconescu Cristiasn
Diaconescu Cristiasn

Reputation: 1

@media screen for all resolutions

I have this site: http://test.dac-proiect.ro/wp/

At the bottom there is a div ("despre noi") that has the following CSS code:

@media screen and (min-width: 1300px) {
    #top {
        background-image:url(img/DESPRE-NOI.png);
        width:400px;
        height:38px;
        margin-left:36%;
        margin-top: 92px;
    }
}
@media screen and (min-width: 1440px) {
    #top {
        background-image:url(img/DESPRE-NOI.png);
        width:400px;
        height:38px;
        margin-left:36%;
        margin-top: 19.5%;
    }
}

For these two resolutions div I set the "despre noi" to be aligned with the center:

enter image description here

To achieve this you should do exactly? I use "screen media" for the most common resolutions?

Upvotes: 0

Views: 77

Answers (2)

Diaconescu Cristiasn
Diaconescu Cristiasn

Reputation: 1

   <div id="container">                       
                         <div id="top"></div>
                          <div id="mid" style="display: none;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut           enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est  laborum.</p>
                          </div>

</div>

    <div id="footer">
      <div id="meniu">
        <?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) ); ?>
      </div> 
      <div id="copyright">
        <h1 id="text_c">© Codoban.com All rights reserved</h1>
      </div>
    </div>
    </body>
</html>

So should it be?

#footer
{ 
  text-align: center;
  border:0px solid #fff;
  width: 100%;
  background:url(img/BODY-MENU.png);
 margin:0px;
bottom:0px;
position: fixed;

}

Upvotes: 0

user488187
user488187

Reputation:

If you want the despre-noi image to always be at the top of the footer (which is fixed), you should move it to the top of the footer. You would need to wrap it in a div like:

<div class="top-container">
    <div id="top"></top>
</div>

so that you could prevent the footer background from applying to it. You could then use CSS to center the image similar to what you do above. If you want it for all resolutions, just leave off the media queries.

Upvotes: 1

Related Questions