I'm trying to reduce my page height but it doesn't work.
So I've tried to move my footer up, but this just leaves a space between the footer and the bottom where, strangely, elements appear to have found a new footer and are interacting with it. (not going below etc.)
How is this possible and why can i increase my page height, but not decrease it under a certain height?
There are two elements which control my front page, one is the page id "28" the other is an element called "parallax-window".
Neither of the two elements are responding to page reductions. Element .page-id-28 responds to increase in height but not decrease,. parallax-window responds to css color change but not to height instructions.
So basically, what I want to know is, what is ultimately controlling my page height amd why won't it go under a certain height but happily go as high as I want.
When I turned .parallax-window green, there was a black space underneath which im assuming is my actual page, defined by id 28.
I've tried to unset my footer position, to no avail and tried negative height for .parallax-window and .page-id-28.
So here is my html:
<div class="parallax-window fullscreen" data-parallax="scroll" data-image-src="http://4309.co.uk/wp-content/uploads/2019/08/download-2.png" data-ios-fix="true" data-over-scroll-fix="true" data-android-fix="true">
<div class="align-transform">
I tried:
#media (min-width:768px)
{.parallax-window{ height:
500px;}}
#media (min-width:768px)
{.page-id-28{height:
500px;}}
#media (min-width:768px)
{body, html.page-id-
28{height: 500px;}}
Nothing.
page here desktop
Perhaps elements on the page are increasing the height, but I should still be able to reduce the height. I've made element "parallax-window" green to make it clearer.
Related
When I reduce my browser window size to less than 980px in width, the content bumps down by 60px
What appears to be happening is that the <header> tag gets kicked down (I don't even know what that tag is doing there) below the navbar
I set the breadcrumbs to style of display:none, but including or excluding them doesn't seem to make a difference.
Not sure what to do to keep it consistent on different screen sizes
Example: http://www.wordisnear.org/
PS - I am using a web2py CMS called Pynuke, which may be using its own particular bootstrap layouts, but there is no S.O. tag for Pynuke (yet).
Use Media query for this, e.g. Example
#media all and (max-width: 980px) and (min-width: 980px) {
body{
margin-top:60px;
}
}
When the viewport is wider than 980px, the navbar has position: fixed (via the .navbar-fixed-top class) -- notice when you scroll down, the navbar remains in position at the top of the screen. In that case, the 60px top margin of the <header> element actually overlaps with the navbar, so the header takes up no space in the main content section. Note, even though you are not using the header, its top margin is actually necessary here -- otherwise, your content would get bumped up and be obscured by the navbar (of course, you could get rid of the header and instead put a top margin on your content container directly).
When the screen size drops, there is a media query that changes the navbar to position: static (presumably so the navbar doesn't remain on screen during scrolling given that space is at a premium on smaller screens). In this case, the 60px top margin of the <header> element no longer overlaps with the navbar and instead takes up space at the top of the main content.
If you're not using the header or breadcrumbs, maybe just get rid of them. Then, add a 60px top margin to the main content div, and set a media query to remove that top margin when the width goes below 980px (so when the navbar switches from fixed to static, the margin will disappear).
I have a website that I made (without bootstrap or any or that stuff, and I am having an issue trying to scale everything down for people with a smaller screen resolution. basically I'll want it to detect the size, and apply appropriate CSS classes to elements to scale everything down if under a specific width. Right now I am just trying to build the CSS classes, and I am having some difficulties. The closest I've gotten is shrinking all the content down using:
transform: scale(.75);
That works awesome on the actual content for resizing, but I'm left with a large padded field around the content. a bit hard to explain, but what I want is for the content to shrink, but the divs to still be 100% of the browser (so if there is a smaller browser it fits nicely without this stupid large padded area around the content)
Here is how it normally looks:
image!
and here is how it looks with the added CSS transform:image2!
Any ideas for how to overcome this would be greatly appreciated, Also note I really don't care about my solution not working in IE9 or lower!
The basic output that I want is the equivelent of shrinking the browser zoom to 75% if that helps..
Depending on how your CSS is written, something as simple as this could work:
#media only screen and (max-width: 600px) {
body {font-size: 85%;}
}
If you have divs with em widths that will shrink their width, but you could change that via the media query above, perhaps setting their widths to 100% etc.
I do not know how resolutions work. If I set the width of my container elements to 1000px and the user opens the page from a 1300px resolution screen, then the right part of the screen 300px would be left white. I don't want that to happen. One way I know is with CSS Media Query but that way I'd have to write tonnes of lines of code. Also I don't want to do it with jQuery. Can someone explain me how resolutions work and how I can create resolution independent elements on my web page?
Use percentages instead of pixels.
for example
div {
height:60%;
width:40%;
}
Using percentages instead of pixels will make it the right size no matter what screen.
I have an HTML page that is using Bootstrap to show a weather forecast. This page is ultimately going to be shown inside of an iframe, so it has fixed dimensions. When the width is >= 768px, I want the images to show horizontally. This works fine when you make the browser wider. When the width is <768px, I want the images to stack themselves and shrink so that all of the text and images fit within the dimensions of the iframe. This is where I'm having trouble.
Here's my fiddle. I've used a parent div with fixed dimensions to simulate the iframe, and set its background color to show where the content overflows its parent. What should be showing is the day, followed by the image, followed by the high / low temperature beneath the image. This should then be repeated for Saturday and Sunday. Instead, the content is overflowing its container and being cut off. Also, the text is not showing in the proper order. I want to fix this while still ensuring that the horizontal images don't break when the browser is wider.
It's a bit confusing for me i guess as I'm still unable to understand your question completely. But is that what you are looking for?
http://jsfiddle.net/ALkKB/15/
#media screen and (max-width: 768px) {
#iframe{width:100%; height:auto;}
}
I appreciate all of your help San. I ended up eliminating the use of Bootstrap and just implemented my own CSS media queries based on the orientation of the iframe. I also had to use some Javascript to calculate how much room was left for the images once all of the other data was loaded and displayed.
Thanks again.
I'm creating a fluid website design and am specifying min-width and max-width values, however, I'd like the navigation bar background to extend from one side of the screen to the other (not be constrained by the max width), whilst keeping all of the <li> elements in it and all other screen content within the specified widths.
Furthermore, I would also like to set a minimum margin for the page (e.g. 16px) so that there is always a gap between the content and the edge of the page.
Ideally as in the image below:
What's the best way to go about containing everything inside the min-width and max-width values, whilst allowing the navbar background to stretch to the screen width. Also, is there a way I can use margin-left: auto and yet keep a minimum margin value? Whenever I've tried to do this I can only get one or the other.
Thanks for any help in advance.
There are a few different ways to do it, but this jsFiddle illustrates how I would do it: http://jsfiddle.net/joshnh/UDwcp/