http://www.akaskyness.com/
This is in the early stages of development. I want this "cover" page to be non-scrollable, with the height of the white|black background adjusting to the height of the browser window. At the moment, when reducing the height of the browser window, the headers don't shift up proportionally and a scrollbar appears. I'm not really concerned about browser width at the moment because I haven't added any code for that yet.
I think I see what you mean - you want the <h1> and <h2> elements to shift vertically as the viewport height is resized, so that they don't end up off the screen (when it gets too short) and create a scrollbar.
In your current CSS, you try to do this using margin-top:17% on <header>. This seems like a logical approach, except something curious happens: the margin-top never changes, regardless of how you resize the browser vertically.
I'll be honest, this stumped me for a while, so I did some searching around about margin behaviour and found out this critical piece of information: "The percentage is calculated with respect to the width of the generated box's containing block." So the browser height is completely ignored in the calculation! If you resize the width of your browser, you can actually see how your headers move up and down on your webpage.
Well, that completely invalidates using a percentage margin to attempt to vertically align <header> relative to the viewport height. What now? Vertical alignment of elements is actually something lots of other developers have tackled in various ways. Here's a simple one that uses absolute positioning, by only rewriting the styles for <header>:
header {
margin-top:-3em;
position:absolute;
width:100%;
top:50%;
}
Here's a JSFiddle demonstration of this new CSS. Note that margin-top:-3em; is a bit of a guess on (half of) how tall your headers are, so if you don't want to hard-code that value, you'll probably have to look at a different approach for vertical alignment (this is just one of the easiest). Also, if you don't want it vertically centered, just change top:50%; to a different percentage value.
Hope this helps! Let me know if you have any questions.
Related
I have a page which has multiple vertical sections, each with a thermometer type control i have built, rendered on each. How do i code it so that when the page loads that the 'mercury' width, of all the sections, can grow in an animated way to fill the thermometers?
I have tried the samples provided for making the form.animateLayout(3000); but i've been unsuccessful in getting individual controls to grow their width concurrently..
FYI the thermometer is a Container, with a Table as its Layout, with a red Label placed on the container, at a specific width
outlineContainer.add(table.createConstraint().widthPercentage(90), mercuryLabel);
This is how i guarantee the thermometer mercury is at the correct width.
Thanks in advance.
You need to animate the direct parent of the growing element so something like this should work:
mercuryLabel.setWidth(0);
outlineContainer.animateLayout(1000);
Make sure you don't have revalidate, repaint or other related code that will disrupt this.
I hope this is not a "big ask" but I'm stuck. I asked this issue on github issues#1334 but I have not got any responsive from the maintainers of the project. Hopefully I can get help here.
Overview
My issue is that I'm trying to adjust the variable width slider (from react-slick documentation) in order to be:
finite
responsive (to different viewports) (if possible to display as many slides according to viewport width)
scroll only 100% visible slides
slides should fill the div display area
Observations
So far, I have managed to make it:
finite
Regarding responsive, breakpoints don't work well for variable width slides.
scroll only 100% visible slides, This is very important when it comes to variable viewport width and when using variable width slides.
slides should fill thedivdisplay area, finite variable width slides when they reach the last slide, even though it was already visible by the previous scroll, the user can still scroll and what is visible is a huge area of blank slides, for example:
The Code
The issue can be replicated and tested in code sandbox
...
...
Any help is welcome.
I have a pretty standard application with a bar at the bottom. The bar and app are the same background color. My issue is that there is a tiny little line along the edge of the application bar, I can only determine that is it some sort of soft edge that is part of the default style of the ApplicationBar.
Here is an image of the display, note the tiny 1-2 pixel horizontal line:
It appears to be a 1-2 pixel black line with transparency. My main question is, what is this line, is it something I am introducing by accident?
It is by design a 1 pixel gap will be there between ApplicationBar and your ContentGrid. The gap will be visible only when your set the Opacity of the ApplicationBar to 1, So to get rid of the gap You can change the Opacity of the ApplicationBar to 0.99, so that the appbar comes above your ContentGrid.
Obviously you need to make some changes to your ContentGrid so that you can access the part of the Grid that the appbar is occupying.If your grid has ScrollViewer or ListView, it is always recommended to have some extra space after its contents*(may be a empty StackPanel with some height)* which will obviously solve this otherwise if it is a Static layout, you can make use of margin Property.
Since it's a bit difficult to explain, I did a mockup to get across as much as possible visually:
http://sassmeister.com/gist/70624a740b1ca4ae7764
(If there's a better way to share a sass gist, let me know. First time using it)
Basically, this is the layout I want for a tablet in landscape mode. What I'm trying to do is make sure it fits perfectly on different tablets with different aspect ratios. Some things are fixed. The main content area is a 16x9 video, so that aspect is locked.
I have the header and footer (main column only) fixed right now as they need to be for portrait mode, but I could bring them into the regular flow if it's helpful for tablet landscape. Anyway, it's all basic responsive right now via susy2, and the sidebar is totally separate so it can scroll independent of the main content. What I would like is for the whole main area including header and footer to fit perfectly with even margins above and below vid, but then have the sidebar column change it's width to match the tablet.
So... if the tablet is wider, the teaser thumbnails go out to 16x9 ratio. If the tablet is narrower, the main column remains unchanged, but the teaser thumbs narrow down to squares.
If it's easier first to just figure out how to responsively shrink the right column only, so the aspect of thumbs is unchanged, that's ok. I just don't want the overall layout to get screwed up on one device vs another because of aspect ratio, so main focus is that the header hits top, footer hits bottom, main vid fits perfectly between them, then sidebar responds to fill in the rest (within reason).
thx for any input. First time making a website here, so lots to learn.
ps. I had vertical scroll enabled for the right column, but disabled it (by adding extra letter to to the scrolling class in scss column) since it's not actually letting me scroll. Not sure if that's because there's no actual content, or it doesn't recognize the empty padded cells as something worthy of scrolling.
You're biting off a lot for your first website, but Sassmeister is a great way to show what you are doing. I approve. :)
One of the problems you'll find is that CSS don't have the concept of aspect ratio built in, so the sort of layout you are attempting is non-trivial. CSS is best at handling widths, and letting everything overflow vertically. It takes some effort to make it handle height well.
If you can get away with it (depending on browser support), your best option is to use flexbox. Flexbox should make this much easier, but doesn't ave a lot of support yet. You could consider table-cells, which have more support, but can be harder to control.
In any case, you should ignore most of Susy for this — at least in laying out the large sections. If you want Susy to help you with grid calculations, ditch the mixins and just use the span() and gutter() functions to help you set widths. Something like this:
.flexbox {
flex: 1;
flex-basis: span(3);
}
.tables {
display: table-cell;
width: span(3);
}
// NOT THIS
.no {
#include span(3);
}
You can go back to using Susy mixins for simpler bits, like the items in the top navigation.
I'm building a website (summer-band.com) and trying to tweak the mobile settings (browser at < 600px) with 100% width settings for several of the elements. Unfortunately, with what I've done so far, the header/ container and the navigation bar as well as the footer all seem to be shooting out different widths and I can't seem to fix this on my own, thus asking for some assistance.
First, the menu: #navigation li a and #navigation li.current_page_item a's width is 100% but has a padding, so the box model won't do what you want. The width should be auto. This is a recurring problem of yours.
Next, the header: You have #headerImg's width set to a constant 600px. In your media query, you'll probably want to make the width and height auto and make the actual img's width 100%.
Moving down, your main #box has a width of 100% and a padding. Due to the box model, this probably won't do what you want. Make the width auto.
Further down, your #footer has a display of inline-block and a width of 100%. You'll probably want to change its display to block and width to auto.
I think that's mostly it, but you might want to set article img's max-width to 100% and remove the explicit width on your Kickstarter screenshot. I don't really know how to deal with the iframe with the video. Sorry.
A few last comments: You seem to be overusing brs and empty p tags rather than using appropriate margins.