CODEWITHSUNDEEP
html
Frank
Frank

Reputation: 31090

How To Get Rid Of White Space In Html Page Viewed From Android Phone?

My site looks good from computer's browsers, I've tried all different browsers, they all look as I intended. But when I tried it from my Samsung Galaxy phone's Chrome browser, something is not right. There are alternating blue and white sections on my page, on the mobile phone's browser, the blue sections got cut off on the right side, left with white space [ it should be all the way to the right ], yet now it looks like this :

enter image description here

What should I do to make it look like from a computer's browser ?

You can view the source code of the page from your browser's "view source" function.

The site is at : https://gatecybertech.com

Upvotes: 0

Views: 210

Answers (2)

Alex Hawking
Alex Hawking

Reputation: 1245

There area a number of ways to fix this.

Remove white space with CSS

To simply remove the white space you could add a 

body {
    background: #yourcolor;
}

Make image responsive

How ever I would suggest setting the width of your image with a size in vw. This will make your images responsive.

You could also do what the below answer says and use SVGs or media queries but I tested the using the size in vw and found it worked just fine

Application

This is how you can set your images width with vw

#yourimageid {
   width: 2vw;
   height: auto;
}

Hope this helped!

Upvotes: 1

Ryan Hinchliffe
Ryan Hinchliffe

Reputation: 167

The problem is a few of your images.

e.g. first the Ted Murphee image then the gate frame .png image

What is happening is the rest of your content is resizing to a smaller screen, while the images stay the same size and create that "whitespace" to the right.

What can you do ?

  1. use .svg images so they will resize depending on the screen size
  2. add a @media query, and make the images resize when the browser size changes

Upvotes: 1

Related Questions