I was wondering this last night and couldn't find a direct answer so I shall ask here. In extreme backgrounds that you are not wanting a constant but yet subtle effect to be visible. How do you accommodate this for mobile design and what happens to the background if the pattern is larger than the screen size? I ask this for certain reasons because I don't know what would happen to the background. Would it not display, shrink, or repeat? Would you code in the a special background for this?
Depends on your CSS....
Since you can set no-repeat, center, cover and various of other options in the CSS. So if you use width:100%, height:100% then it'll shrink or you could use cover which will do the same. If you want a pattern repeating then you use repeat etc etc. You can even specify a different liter background for mobile phones and pads such as:
#media only screen and (min-width:480px) and (max-width:767px){
html, body {background-image:url("image.jpg");}
}
Your find that with iPhones and iPads they upscale and then downscale and images can look horrid but there's ways around this using the css cover element.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
Now, I understand how "breakpoints" work - when the browser window reaches a certain width, the element within the queries changes. Now, here is my question:
If I start designing a website, and start adding styles for how I want to look on a mobile device, when the design is finished and I want to expand on it, what's the effective way on doing it?
At the moment, all that I can think of is adding a queries with a higher min-width breakpoint, and then paste the CSS from the code that I already made and start making changes respectively, within the queries. I have a strong feeling that this is not the correct way of doing things, so this is why I am asking for help. Thanks!
You have the correct approach when it comes to making a design and thinking mobile first. Now what you need to do is think of how it will be when you resize it to large device widths.
There are a lot of things you can look into, many people could suggest you to look at frameworks such as Bootstrap just to understand how they use media queries to achieve many things. My advice is to use as little media queries as you can. Try to support at least two device widths: mobile/tablets and desktop. Since mobile/desktop can be interchangeable and new devices are always coming out, a consistent design is best. However you can safely support mobile/tablet/desktop if you take the time to do so properly.
Now, I will try to keep it very simple for you and introduce the most basic way to do media queries right and expand from there.
Let's begin with the most important yet simplest building block of responsive web design: a container element. This container element is to be used for the content in your website, the content is for you to choose to imagine upon, since these containers will need to expand from device width to device with accordingly.
Navigation bar example:
.navigation-bar-container {
position: relative;
width: 100%;
min-width: 320px;
max-width: 100%;
height: 100px;
}
Check the above code its so simple and straight forward, what does it do? I can imagine it will hold all the elements within a navigation bar. It can certainly be used in more than just that way, but for now all we care about its a navigation bar.
It's minimum width is 320px, because the smallest screen you need to support may be 320px wide (iPhone anyone) so there is no need to shrink your element below that.
Max width is interesting. Currently the nav bar's max width is 100% because I said it is... no, that does not make any sense. Why is it 100%? It is because I want to make it always expand to the full width of the screen, regardless of the screen width. That is it's default behavior.
Now try and think of what will happen to your navigation bar's width when you are in a different screen sizes, such as mobile devices. What will happen with the elements, will they shrink with your container? Will they even fit when the screen size is too small? Enter media queries.
Full desktop widths: approximately 769px or above... this is subject to change of course.
The max width is 100% and width 100% means it will adjust to whatever the screen size is. Default behavior doing its thing, yes!
Tablets: approximately 421px to 768px... this is subject to change of course
If your elements will not fit into all tablet sizes and make your navigation bar look weird, yes try it throw some divs and stuff in it and shrink it, then what do we do? It is time to make them fit by using the good old media queries:
#media screen and (max-width: 768px) {
.navigation-bar-container {
display: none;
}
.sliding-navbar-container {
display: block;
position: absolute;
height: 100%;
left: 0;
top: 0;
width: 320px;
}
}
Yes I did not make them fit at all. I swapped the good old navigation-bar-container width a different one. Classic example of what is good and safe when using media queries. Instead of breaking your head over how to fit these elements, spare no hesitation my friend, just swap your navigation bar for another that will work on smaller devices in there.
Note how the new navigation bar actually accounts for its width 320px, it will sit absolutely positioned to the top and left of the screen, doing a good job there. How to make it slide in and out, pop up, look neat is another question entirely! Don't ask unless you are curious... back to media queries!
However if we are speaking of an element which will change, let's say it always occupies 100 percent of your screen width, and then shrink to occupy half of the screen width for tablet/landscape phone devices only, then you may want to use a media query like so:
#media screen and (min-width: 421px) and (max-width: 768px) {
max-width: 50%;
}
Very small and simple change. Max width is interesting because it controls your inner width, which is by default set to 100%. This change will force your element to adjust to 50% of the screen width while still resizing to adjust to 100% of the new element width. It could also be a good idea to make it max-width: 50vw since it will adjust to the viewport width instead, thus making it responsive even when dealing with widely different viewports.
And so, we come to our conclusion TLDR:
Use as little media query sizes as you need, because if you need a lot then you are doing it wrong, seriously!
If you need a lot, cannot avoid it, then get to know Bootstrap, let other people worry about the media query nightmares.
Think in containers, your elements will sit and move around in them. Think of how these containers will flow from desktop to mobile and vice versa. Putting thought behind this is crucial as it is the source of your responsive behavior and should be the focus of your media queries.
Although not covered here, you can easily look at media queries and font/image examples. Responsive fonts and images are a crucial part of your content and they as such should be accounted for with media queries. Background image changes, better readability depending on the device you are on, all of that matters and can be simplified via media queries.
I put this last here because IT MATTERS A LOT use SASS/SCSS and save yourself a ton of trouble when working with media queries (and everything CSS). Look into mixins, variables, partials which you can use along media queries. You will love it if you didn't know about it and start using it now.
Need more? Fine enjoy Google's responsive web design fundamentals
Good luck!!!
I've got the page divided into different parts like header, footer and body. Now i need to set images on the background of header and footer. Should i choose a bigger image which can be re sized according to user's system dimension or should i keep it constant size?
How to keep an image withing the section that has been decided for it?
i'd create separate images for the smaller devices as the smaller file sizes will help when loading on tablet or mobile. Load in the different images using media queries
header-bg-desktop.jpg
header-bg-tablet.jpg
header-bg-mobile.jpg
I agree using separate images is beneficial for performance (especially on phones), though if you wanted to do this with CSS only, you can use background-size: cover, which will ensure the background image does not stretch, but also fills in the entire parent container.
E.G. http://jsfiddle.net/YNBw9/
You want to use background-size: cover to get the images to fill the containers at different size. You also want to use media queries, if possible, to deliver the right sized image to the right screens. That is, you don't want to overload a small screen with more pixels than it needs (not the screen, the bandwidth and load time) and you don't want to scale up a crappy image for larger screens.
http://plnkr.co/edit/bMryzPTGzUK6Y5BbDpWh?p=preview shows an example. Resize the right pane.
More on media queries:
https://www.google.com/search?q=media+queries
More on background-size:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
http://css-tricks.com/perfect-full-page-background-image/
It largely depends upon your website's target audience.
If you are going to target mobile, tablet and desktop all three user bases, then you must supply images for all of them with different background image code via CSS.
Here is a very good reference to get you started,
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
If you target desktop users only then you need to supply one-background image size and that should be enough.
Example code,
<style type="text/css">
body {
background-image:url('<%=request.getContextPath()%>/images/logo.jpg');
background-position: left top;
background-repeat: no-repeat;
}
</style>
I am trying to fix an image to a certain point in the background image for a project.
I've created a jsbin as I couldn't find the words to explain what I'm trying to accomplish.
http://jsbin.com/esUNEKIM/2/
In the example, the little map pointer is perfectly placed at the tip of the finger in the background image (at my resolution and full screen), but moves when the image scales down.
Any clues?
PS: I need the two images to be separate. I'm open to hacks as this will be a temporary landing page and we don't really care about old IE compatibility here.
Thanks!
Edit: I see it now when I shrink my browser vertically - you'll need to add in vertical media queries (e.g.: http://cognition.happycog.com/article/go-vertical/) or use JavaScript.
I actually didn't see it move when it scaled-down but when it scaled up. For me, 230px seems to work until a given point (around 1600px). Use a media-query to change the right position. It looks to me like 16% seems to work after that point.
#media screen and (min-width: 1600px){
#capsule {
right: 16%;
}
}
If you're still seeing it on scale-down, you can add multiple media-queries to adjust the position.
I've found StackOverflow extremely useful so thanks for any help in advance.
On http://test2.heyscout.com/, I'm wondering how to properly set up my background-image in my "hero div" for responsive web design. I've been playing around with numerous settings but I'd like it to:
stay in position consistently without jumping around due to browser size (for example, on the mobile phone, it gets misaligned or there's white space where there shouldn't be)
the 'Verify Anyone Offline' doesn't resize properly even though I set it in em
the button looks strange on a mobile device
What is the best practice for keeping the "hero div" in check? I'd surmise it'd have to do something with the min-height or perhaps fixing the dimensions of the actual image. Should I set the height of the hero div in percentage rather than pixels?
Also any advice on how to keep my "trimester div" fill up nicely the bottom 1/3 of the page consistently would be great- I'd imagine when the height of the browser is bigger than expected, it'd look strange. I've read that it's best to keep the height attribute alone for RWD but I'm wondering if there are any tricks to make sure it resizes properly.
Have you looked into Media Queries? Basically, they allow you to set specific CSS based on browser width (and height). This will allow you to control how your page looks at specific browser sizes.
Example - CSS at different widths:
#media screen and (max-width: 600px) {
/* add some CSS here for 600px maximum width*/
}
#media screen and (max-width: 960px) {
/* add some CSS here for 960px maximum width*/
}
To get the background image to always fill the div, use background-size: cover2 unless you need to support IE8.
If your font size doesn't look right across pc/tablet/handheld, try using media queries to set font sizes for specific resolutions.
I'm not sure how to help you with your button "looking strange", except to offer profuse sympathy.
In the future, try to keep your questions more focused. :)
give
background-size:contain;
and this may solve your problem, because it will auto adjust size by contain!
I am stuck on a css layout for a site I'm working on. It is a reports tool, and will be used on both wide screen monitors and netbooks. The site is done, except for a stylesheet which can degrade nicely from the (very) widescreen format to a narrow (netbook) format.
This is how it should appear on a wide screen:
http://s1.postimage.org/1d67kaxdw/pageverywide.png
And for a narrow screen:
http://s1.postimage.org/1d65wrkw4/pagenarrow.png
I'd like it to degrade into the right one in the narrow pic, but I think the left one will be more doable.
I know I can do a conditional css load depending on the screen size, but I would like it to just be one stylesheet. The core of the problem is that I want the right (graph) content to be vertical and centered on it's part of the page when wide, but then centered and horizontal above/below the table when there is no space for it to be displayed. Vertical scrolling is okay. The table with the red sides is of dynamic height, which has also been a problem.
I have a layout which centers the right graph data as described, but cannot figure out how to force it horizontal from vertical or vice versa. How can I use a single css sheet to accomplish this?
I know I can do a conditional css load
depending on the screen size, but I
would like it to just be one
stylesheet.
What you can do is look into media queries, a new feature introduced in CSS3. They allow you to specific a set of certain rules depending on the screen size, 1 file and no javascript.
Here is an example
#media screen and (max-width: 600px) {
.graphs{
/* change position */
}
}