Reputation: 31090
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 :
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
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
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 ?
Upvotes: 1