CODEWITHSUNDEEP
javascripthtmlcssresponsive-design
Vel Louise
Vel Louise

Reputation: 23

Responsive Website not working on Tablet version

I have a resposive site which works fine on desktop and mobile version but on Tablet version, text and images are not in appropriate places and move towards right side making it non-responsive.

You can check the link here for screenshot: https://dl.dropboxusercontent.com/s/835qg39vor9fhe9/websiteresponsive.JPG

This is my website: http://www.sociolife.co.in/

PS: When site is opened at full browser width in desktop, this problem wont occur but when you try to decrease the browser width search bar and subscription box is moving towards right.

Please can you tell me if there is any CSS problem or is there any javascript problem and how can I fix it?

Upvotes: 1

Views: 1764

Answers (3)

Towett Sammy
Towett Sammy

Reputation: 1

  • This works well.

        @media only screen and (min-width: 730px) and (max-width: 1028px){
     #menu-main {
      margin-top: -10px;
     }

         #main-nav ul li {
           z-index: 20;
           text-transform: uppercase;
           font-family: Oswald,arial,Georgia, serif;
           font-size: 12px;
           position: relative;
           display: inline-block;
           float: left;
           border: 1px solid;
           border-width: 0 0 0 1px;
           height: 50px;
         }
 }

Upvotes: 0

V Sree Harissh
V Sree Harissh

Reputation: 663

Change in your html file: At line 1195 of your source code change wiz.

#main-nav {
width: 1000px;
}

change it to:

#main-nav {
width: 103%;
}

At line 1201:

.column-right-outer{
width:320px;
float:left;
}

to the below code:

.column-right-outer{
display: none;
}

At line 1204 change this:

.column-center-outer{
width:670px;
border-right: 0px solid #eaeaea;
}

to this:

.column-center-outer{
width:620px;
border-right: 0px solid #eaeaea;
}

edit- 27/04/15 delete the following lines at line 1208:

#menu-main {
  display: none;
}

Add the below lines of code in a separate <style></style> tag in your HTML file.

 @media only screen and (min-width: 730px) and (max-width: 1028px){
            #menu-main {
             margin-top: -10px;
            }

                #main-nav ul li {
                  z-index: 20;
                  text-transform: uppercase;
                  font-family: Oswald,arial,Georgia, serif;
                  font-size: 12px;
                  position: relative;
                  display: inline-block;
                  float: left;
                  border: 1px solid;
                  border-width: 0 0 0 1px;
                  height: 50px;
                }
        }

Now your site will look much better. :)

Upvotes: 0

Billy
Billy

Reputation: 1043

Your meta viewport is wrong. You should use something like this :

<meta name="viewport" content="width=device-width, initial-scale=1">

You can check out this : https://css-tricks.com/snippets/html/responsive-meta-tag/

Edit : I thought you meant your website wouldn't work in tablet / mobile view. Looking at the code, the width for #main-nav and probably the other few elements are still fixed at 1000px in the 'tablet view'. I think there's something wrong in your media queries.

Edit 2 : Based on your CSS, here's some relevant code (I'm taking #main-nav as example, you can check for other affected elements) :

@media only screen and (max-width: 1028px){
    #main-nav{
        width:1000px;
    }
}
@media only screen and (max-width: 725px){
    #main-nav{
        width:430px;
    }
}

Do you see the problem now? You're making the navigation 1000px wide for screen sizes between 726px and 1028px. You should have used width:100% or width:725px for your #main-nav's 'tablet version'. Now you just need to apply the same principle and check for other areas of your website which have the same problem.

Upvotes: 2

Related Questions