Issue with layout at resolution 1024x768

Design Front End Development
1

Hi, I developed a website using Neat and Bourbon. I just deployed a test version:

http://test.anniek-lambrecht.be

but now I notice that on screens with a resolution of 1024x768 pixels there is a problem with the layout.

for some reason, the logo and banner are completely stuck to the left border of the frame.

I would have loved to include some screenshots in this post, but for some reason my screenshot’s don’t show in this post.

My code repository is at:

thanks for your help,

Anthony

2

is there a reason why I can’t upload screenshots? I tried it several time, everytime I upload a screenshot I get an error message, when I do the upload again an empty image tag is inserted

3

I can’t replicate the problem you are describing. Do you still see it happening?

4

@acandael_acanda I’m in the same boat as @chriskuffo — I’m not sure I’m able to replicate the problem. I made a gif of the logo at a few different browser widths — is the issue happening in this gif?

5

@chriskuffo and @Edwin thanks for your replies folks. I worked on the problem yesterday.

I used the media query defined by Bitters (in _grid-settings.scss):

$medium-screen: new-breakpoint(min-width em(760) 4);

for my header and content section I defined some left and right padding, and this fixed the issue for screens with a resolution of 1024 x 768 pixels

  @include media($medium-screen) {
    padding-left: em(20);
    padding-right: em(10);
  }

The only thing that bothers me still is that the sliding banner seems a bit big on 1024 x 768 screens.

@Edwin, neat trick with the animated gif :smile:

greetings,

Anthony

6

HI Edwin - Was there a simple way to make that screenshot animated? Very cool.

7

Ok, so you’re no longer having the problem?

@acandael_acanda and @chriskuffo I used to wonderful licecap

8

@Edwin

No, but I got feedback that at some screens the right box ‘Acties’, is floating under the left box ‘Beautysalon Anniek Lambrecht’.

Don’t know the screen resolution where that happens though. Tested it on iPhone and iPad and there the layout was fine.

greetings,

Anthony