I've really got no clue how to describe the subject in English, so here is more info:
Check my (temporary) website on your phone (no matter what kind one) -> Click
What you'll see is the whole site including the background spread over your screen, instead of focussing on just the container in particular.
My only question is: How do I let the screen focus on the container, instead of the whole site. By other words: Ignore the background and spread the container over your whole screen.
Quick mockup:
What is the best way to achieve it, so it adjusts it to the whole screen of your phone?
Thanks!
Try this:
<meta name="viewport" content="width=device-width">
This will "zoom" your device to a reasonable value. ("reasonable" still depends somewhat on the vendor.)
In your case you can play around with device-width parameter and enter a value which suits you. But better stick with it for the time being.
Starting from this you can create different css styles via media-query and e.g. specify
#media (max-width: 400px)
.my-content-div {
width: 100%;
}
}
to scale your content to 100% on mobile devices.
Making a true responsive design is still a big mess but it can be done. Key is, that you start with something you can at least loosely rely on and then work your way from there.
If you want to make it responsive I think the best solution is by using Media Query instead of adjusting the viewport. Set #container to 100% width and height and set the margin to 0.
Related
UI: Angular
I'm using the eLayoutType.application, but on the bigger screen there is always too much spacing on both sides of the page.
please see this pic for example
I guess it has something to do with the checkWindowWidth() of the LayoutService ?
How can I change it to utilize the full window width on the larger screen? (my app is supposed to be used on the larger screen/window only, so this spacing is nothing but wasting space for me.)
I wrote the following code in the styles.scss file under the src folder, it worked for me, I hope it will work for you
#media screen and (min-width: 2500px){
.container, .container-lg, .container-md, .container-sm, .container-xl {
max-width: 2000px;
}
}
You can play with pixels according to your own needs.
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 working on a website that has quite a unique slideshow...
As you can see, the top of the image needs to curve in a weird way, and then blend in to the background. Currently, this is just set up as an overlayed <div> that lines up with the main background image, but because the site is responsive, things get funky at certain resolutions.
Is there any way to use CSS to accomplish this same effect? I've been experimenting with border-radius, but I'm not sure it's possible. I'd even be happy if it wasn't 100% cross browser, as it can degrade to just a straight edge.
Thanks.
I've done some work with SVGs as section separators.
The idea was to place a SVG above the section that it should "clip" and use negative margins (or the top property) to lower the separator onto the section. The section can have a bg image to achieve this effect.
In this demo, I was using 100% width separators: http://jsfiddle.net/fmpeyton/NuneR/
A word of caution: With 100% separators like in this demo, you might get some 'bleed' from the image underneath. It happened in FF when I was prototyping that JSfiddle. I wasn't really able to alleviate this without some hacky widths/margins.
Hope it points you in the right direction.
Edit:
To expand upon my answer, there are some other ways to clip/mask an element. Here are some resources I've been looking over when looking for a solution:
http://www.hongkiat.com/blog/css-masking/
http://www.html5rocks.com/en/tutorials/masking/adobe/
Most of the clipping/masking properties are not cross browser compatible, so use only in a case where you can fall back to a full, unmasked image.
You can use Properity for css 3 :
transform:rotate(10deg);
border-radius:7px;
box-shadow:4px 5px 6px #DDD;
It will create good attraction for images and visual contents. Best of Luck.
I'm designing a responsive site using edge reflow with the following rules for breakpoints:
<480px, <768, 1024>
I'm using a different background picture for each breakpoint of respective widths. However when I add them to Reflow with contain for scale-x it seems as if the image I created is not that size. Most of them were at least 200 pixels shorter than designed.
So my question is what dimensions should I use background images for each breakpoint as well as any other guidance for this using Reflow or suggestions of I'm doing something wrong.
Normally I'd use cover rather than contain but then the image scales and doesn't show what I need it to from device to device.
Thanks
As I am developing an mobile app, I set "width=device-width". However, this would lead be image be magnified to fill the screen when viewing in a normal computer. Of course it should be what it is supposed to do, but would it be possible to make it so that the image would at most appear as big as its original size and no more?
Use css:
max-width: "somethingpx";