I have a problem with my website.
When I resize the browser window or access the site from a device with a small screen, a white transparent box appears from the bottom of the page and grows bigger as I resize the window.
I have no idea where it comes from and can't find the issue in my code.
To see what I am referring to, try scrolling down to the bottom of this page: [redacted] and make the window smaller.
That looks like your full screen image shrinks too small as the page resizes. And when you resize, the solid background color becomes visible, appearing as like a box.
So you might need to use an approach that stops shrinking that background image when it gets to a certain point so as not to be smaller than the window-height.
Related
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
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!
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 ?
use .svg images so they will resize depending on the screen size
add a #media query, and make the images resize when the browser size changes
I need help with my comming-soon-webpage (swedish) that I am designing and coding; http://www.fjalltunnan.se/
My background-image getting cut off outside original window display (browser viewport). You will see this at the bottom if you resize the broswer window on a comupter or if you visit the webpage from a mobile device, a gray background appear (the body background color #ddd). How can I solve this? I need the background to always be 100% of the viewport, even when resizing the broser window. And keep the footer sticky.
Regards, Patrick
I have a panel with top toolbar which contains one button pushed all the way to the right. Initially, the button overflows and gets cut off until the window is resized, then it automatically adjusts.
//toolbar inside panel initComponent
this.dockedItems = [{
xtype:"toolbar",
dock:"top",
style:"background-color:#d8d8d8;",
layout:{pack:"end"},
items:[
//"->",
{
xtype:"button", text:"Welcome", itemId:"userid",
menu: new Ext.menu.Menu({
items:[{icon:"blah.png", scope:this,text:"Logout", itemId:"logout", handler:function(){this.fireEvent("logout");}}]
})
}
}];
When the window is resized, regardless of how much horizontally/vertically, the button adjusts and all is fine after that. The issue is on initial load or before window is resized, the button is cut off. Once I resize window the button adjusts and as I gradually make the window smaller the button stays visible. This is what I am essentially trying to achieve--keeping the button aligned/floating right regardless of the aspect ratio or resolution of the users screen.
Using the CSS left property with a hardcoded px value this problem does not occur. However, it gets cut off or does not show at all on screens with different resolutions.
So my question is how can i prevent the button from overflowing initially? Or is there another way I can align the button to the right, making it compatible for all screen resolutions?
ty
I have a large background image (3600x1600) for my website which I want to use at this resolution to cover pretty much all screens up to 2k.
However, my dilemma is that this image includes sky in it and the top 1000 or so pixels are literally just sky, meaning that at 1080p, all you can really see is the sky in the image, due to the fact that the browser will start the image at the top of the page and expand down as your resolution gets larger.
I need the background-image to stick to the bottom of the page and expand upwards as opposed to downwards, so all resolutions can see the city in the image and then the sky covers larger resolutions.
I've tried a few different things, scaling background to 100% using CSS3, which due to the aspect ratio of the picture leaves a white gap at the bottom of the page at 16:9 and the position "bottom" tag, just puts the bottom of the image at the top of the page which is ridiculous...
Any ideas of how to do this or if it is possible at all? Thanks.
When viewing the following test page with the browser in the BlackBerry 9630 simulator, the text width is wider than the screen width. So, when zoomed to 100%, one has to pan.
http://sites.inka.de/klee/blackberry/text.html
What solutions are there to make the text wrap to screen width?
The browser has a default width for the window, when you zoom, the window keep it's full width, so every website will have this problem.
You can't fix this, since it's an expected behavior.
If you don't want your user to zoom on your website, make the font bigger.
Found the solution:
<body style="margin: 0">
With the default margin, after loading the page, the cursor has the shape of a magnifying glass, allowing the user to zoom in, etc.