Photoshop Question posted in
The official user guide can be found here.

How to center horizontal scrolls for small screens – Photoshop

I am having problem in making a screen center for small screens

I’ve created 1500px wide long page designed in photoshop and sliced into tables.

i used the following code to center my page

width:1500px;
margin: 0 auto ;
position:relative;

to make it center , its good on big screens but in small screens a horizontal scrolls appears and its all to left i want to in middle as a default and i can remove it using overflow x hidden.

Tags:

2

Answers


  1. 0

    Your applying a static width to page, so if your viewing in small screen, page gets overflow, so in this case you have to adjust the page width with respect to screen resolution. It can be done by using media query, refer the below link about media query – http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

    use your CSS code with different static width in different resolution like 

    @media (max-width: 600px) {
  .smallerscreen{
    width:1500px;
    margin: 0 auto ;
   position:relative;
  }
}
@media (max-width: 300px) {
  .smallerscreen{
    width:500px;
    margin: 0 auto ;
   position:relative;
  }
}

    After reviewing your code, you have go with max-width instead of width in container class as said by Neel. 

    .container12 { max-width: 1500px;}

    Also set image width as 100% as like in below code.

    div[id^="index-"] > img[id^="index_"] {
    width: 100%;
}
    Login or Signup to reply.
  2. 0

    Problem with your code is, you used tag and gave width of 1500(not dynamic) also i got containers(#index-07_,#container12) with style of 

    width : 1500px

    instead of using

    max-width:1500px

    change them also add style(obviously not good choice; you may choose specific image tag but for quick fix it will work for you)

    img{width:100%}

    i hope it may worked for you

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search