Since a couple of weeks i'm building a new website. This website starts to look pretty good but there is one problem.
When i view my website in a browser window that is smaller than the actual webpage, the menubar on top of the page gets cut off. I can't scroll up and down the page, but the top part can't be reeched.
This problem probably has something to do with the 'center' code I use for center vertically. Is there an solution where i can keep my webpaged centered but still can reached the hole page once I'm using a small window?
I all ready solved the problem in Chrome mobile by using a 'viewport' metatag.
Sadly the desktop browsers like IE, safari, Chrome etc. still refuse to show the topbar of my webpage when the window is small.
Here is a link to my website:
test.themissingsticks.com
Try viewing it in a fullscrene window (with a resolution above 800px height) and view it with a window of less than 600px height. You will notice the gray menubar on the top of my website will not show, net even when you try to scroll upwards.
The website is centered by the following line of css:
top: 50%;
margin-top: -340px;
left: 50%;
margin-left: -513px;
width of the page is 1026px and height is 680px.
Please help. Thanks in advance!
go to style.csss
change css of "menutms"
replace margin-top: -340px; by margin-top: -300px;
it will work in all browser.
Found the answer! I made 2 div's for vertical and horizontal center alignment. These two are positioned absolutely. the rest of the hole webpage is positioned relatively inside these div's.
The only downside is that IE9 is not displaying the site very well.
Here's a disciption of the method:
http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/
Related
I am trying to accomplish something a bit strange. I am working on a mobile-responsive website where in most of the pages all of the content fits inside the viewport so there is no overflow or scrollbars in most scenarios. This looks perfect when viewed on a desktop screen but I really want the tactile feeling of touch scrolling when viewed in portrait on mobile devices, as the page being completely static feels odd on a mobile website. I was thinking of just adding some blank space below the viewport by setting the 'bottom' attribute of my footer to a minus offset value like so:
#footer {
bottom: -20px;
position: absolute;
width: 100%;
height: 40px;
}
This sort of accomplishes what I am looking for and enables scrolling with the extra dead space but after scrolling up and down a couple of times, a blank white space that I assume is the height of the footer appears that is not covered by the pages background styles (which is applied to the page's body tag).
Is there any way of accomplishing what I am looking to achieve cleanly without modifying the rest of the page's content?
Thanks
I've been battling with this simple issue for a while and I'm looking for some help...
I'm trying to make a full width colour banner that spans the full width of the page, but doesn't in any way affect the browser viewport sizing. I want it to be visible to human eyes, but I don't want it to affect the size/location of the browser's start view or scrolling behavior... just like it's not really there.
I also want to be able to place the banner in-line in the HTML.
Here is my test page: http://www.tanatu.com/widthtest
The Green Banner works perfectly, but it's y-location is defined in CSS (which is a pain)
The Pink Banner is my best guess so far, and works as intended on Chrome, but not on Safari on iOS, where the viewport is skewed to one side
Safari iOS Positioning Issue
Correct Positioning
I've been playing with this for months so any help would be MASSIVELY appreciated! :0)
Thanks!
Because you are trying to break out of your parent container that is where your challenge is. You can do this a few ways but I think the easiest without completely changing your markup would be to use a combination of viewport width units and calc()
If you change these attributes on #widthtest4 it should work:
#widthtest4 {
width: 100vw;
margin-left: calc(-50vw + 426px);
}
I would like to have a background image on a website. This seems like a pretty reasonable request.
I want the background image to be in a fixed position, so that the content scrolls over the top of it. On a classic desktop browser, you can use something like background-attachment: fixed, but this has no affect on my small touch screens. Instead the image scrolls along with you.
It would be great if I could have a position: fixed div with the background image - could accomplish this... but then there is another issue where the 'chrome' or the UI for these touch/small-screen browsers / changes the size of the view-port to accommodate it's buttons - and then again when you scroll down + the buttons go away and the viewport is now taller. (this is not a new problem, but it seems like a problem everyone is OK with.) I am wondering if I'm missing some other option / . I've been trying to find a way around this for years.
<div class='background'></div>
.background
background-image: url('some-image.jpg')
position: fixed
top: 0
right: 0
bottom: 0
left: 0
http://codepen.io/sheriffderek/pen/pbQpwp
Debug view for phone: http://s.codepen.io/sheriffderek/debug/pbQpwp
juniorgoldreport.com is the website I'm working with. On regular desktop view its fine, when I shrink the window down smaller and smaller it seems to act responsive and it's progress. It is being made in wordpress.
When I view it on my smartphone, (LG G4), there is a huge white space to the right of the website and I cannot figure out why. I've been using inspect element via chrome to trouble shoot, but being on a cell phone I dont have that option so easily.
Does anyone have an idea?
Here's an image of the issue when you search the website on a mobile device:
Along with that too, if you guys easily know in my header my logo and my social media/subscribe button are really difficult to align center so its even on both side and they're aligned vertically.Any hints or ideas on this one? I'm much more concerned with the mobile issue though.
Looks to me like it's
.page { overflow: visible !important; }
in line 3308 that's causing the issue. Not sure what purpose that's serving, so you can take it out, but it might cause other issues.
Remove left: 50px; from .site-main .sidebar-container and the gap should disappear.
I have a page I am designing that is purely html with a css stylesheet.
I have it set up with scrollable content with a header and footer somewhat like this example here: http://www.cssplay.co.uk/layouts/basics2.html
except my header and footer consist of multiple images as opposed to text.
The issue I am having is that when I scroll down the page a little and resize the window to a smaller size, my header and footer disappear... but only in Firefox.
When I maximize the window again, the footer appears but some 300-400-odd pixels too high and the header is still gone.
Safari, Opera and Chrome all work fine; I can resize the browser window however much I want and my page reacts appropriately.
What could be causing this?
The weird thing is that if I don't scroll at all, and then proceed to resize the window, Firefox retains my page's styling...
possibly an overflow:scroll issue?
thanks everyone
sorry, i forgot to include my link:
http://www.theskycaptain.com/THESKYCAPTAIN.COM/projects/cosmicwomb.html
(I realize that the bandcamp player isn't behaving properly and my codes a bit messy, but I'm in the midst of developing, I've just hosted it to sort out this issue: simply scroll down a bit, resize the window and then maximize and you will see what I mean)
Your webpage has an improperly defined img and br tags everywhere including other errors that need to be cleaned up.
Incorrect Example:
<img src="../image/topspace.png"></img>
Correct Example:
<img src="../image/topspace.png" alt="image" />
For more info on img tags, read here.
Also, change:
</br>
To:
<br />
Try giving top and bottom values to your absolutely positioned elements.
i.e.
.topspace, .headercon, .scroller { top: 0px; }
.footer { bottom: 0px; }
( These are not necessarily the exact values you'd want, but simply an example )