Skip to main content
Hosun
Hosun
Inspiring
June 26, 2019
Answered

browser [Issues with images when using zoom in Chrome]

Hi,

Moving the zoom on Chrome from 100% to 50%,

Roar Cycles 4 looks fine.

But 6 images on Hosuns Portfolio 4 looks odd.

Is there any way to fix the problem?

Roar Cycles 4

Hosuns Portfolio 4

Hosun Kang

This topic is closed to new replies. Start a new post to keep the conversation going.
osgood_Correct answer
Legend
June 27, 2019

Just wrap your complete code in a wrapper <div>

<div class="wrapper">

All your other html code goes here.

</div>

Then use:

.wrapper {

width: 90%;

max-width: 1200px;

margin: 0 auto;

}

I'm not sure this is a great idea simply to keep the 'proportion' of the layout correct and centered in the browsers window when zooming out. I personally don't know anyone that actually zooms out. Most likely they will want to zoom in and retricting the width to 1200px wont allow them to do that.

View reply

3 replies

osgood_
Legend
June 26, 2019

Try setting a max-width in px on your containers.

Example:

width: 80%;

max-width: 1200px;

margin: 0 auto;

Translate
    Hosun
    HosunAuthor
    Inspiring
    June 27, 2019

    Hi,

    I did the follow;

    [Desktop View]

    change: max-width -> width

    added lines 124 & 125

    [Tablet View]

    added lines 220-222

    Q1.

    Am I correct?

    Q2.

    Another issue is the difference in margins.

    .box1 {

    background-color: palegreen;

    padding: 16px 32px 26px 32px;

    background-image: url(images/hero-background.jpg);

    background-size: cover; /*responsiveness*/

    color: white;

    margin: 1%;

    }

    .thumbnails {

    display: flex;

    flex-wrap: wrap;

    justify-content: space-between;

    border-top: 1px solid black;

    border-bottom: 1px solid black;

    padding-top: 12px;

    margin: 0px 1% 12px 1%;

    }

    Is there any way to fix it?

    Hosuns Portfolio 4

    Hosun Kang

    Translate
    osgood_Correct answer
    Legend
    June 27, 2019

    Just wrap your complete code in a wrapper <div>

    <div class="wrapper">

    All your other html code goes here.

    </div>

    Then use:

    .wrapper {

    width: 90%;

    max-width: 1200px;

    margin: 0 auto;

    }

    I'm not sure this is a great idea simply to keep the 'proportion' of the layout correct and centered in the browsers window when zooming out. I personally don't know anyone that actually zooms out. Most likely they will want to zoom in and retricting the width to 1200px wont allow them to do that.

    Translate
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices