Overlay information when using Media Queries

Asked

Viewed 130 times

1

I developed this site www.prolinesound.com.br, in the desktop version everything is perfect but when I started adjusting the media queries to make it more mobile friendly, I found a problem. When I click on the link "who we are", it blocks part of the text, and I click on some other link (that is working) and then click on "who we are" it positions the screen above where it should.

Can someone help me??

HTML

CSS responsive

@media screen and (max-width: 520px){
.pageTopo{
    width: 520px;
}
.pageWhite{
    padding: 50px 0px 10px 0px;
    width: 520px;
}
.pageGray{
    padding: 50px 0px 10px 0px;
    width: 520px;
    min-height: 750px;
}
.container{
    width: 520px;
    margin: 0px auto;
    padding: 0px 0px;
    box-sizing: border-box;
}

CSS standard

.pageTopo{
background-color: rgb(225, 225, 225);
position: relative;
width: 100%;
z-index: 100;
display: block;

} .pageWhite{ background-color: #FFFFFF; width: 100%; min-height: 600px; position: relative; display: block; padding: 70px 0px 25px 0px; } pageGray{ background-color: #EEEEEE; width: 100%; min-height: 550px; position: relative; display: block; padding: 70px 0px 25px 0px; } container{. width: 1020px; margin: 0px auto; }

html css

  • obstruct in which direction, more details!

  • 1

    could put the CSS used for the responsiveness of the problem in question?

  • Please send the code so we can see what might be wrong.

  • When accessing the site in testing the responsiveness in many resolutions the loss of information, I would recommend you to try to use bootstrap or medias queries standardized for an even better result, it is something simple and it will surely add more value to the site.

2 answers

1

Use the Chrome tool to test your layouts for mobile versions, with this feature you can identify the css that is being used in a particular part of the site and fix it promptly.

  • I use in case the google chorme Pendule extension which is very good for responsive design test.

0

Hello, on my sites I use float: left; along with width: 100%; in the css classes of all Divs, thus preventing this issue of overlapping of Divs on the screen;

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.