I built a new .Net website which will fit nicely on 1200px width resolution.
The problem is that some of my users will browse this website with 1024px width.
Is there a way to fix this problem quick without changing all the design of the page? For example, to put some javascript that will do the trick.
Please keep in mind that the top banner of my site is 1200px wide, and I don't need to support less then 1024px resolution.
Thanks a lot.
It all depends on how 'properly' your web site was designed. You might need to change a few widths for the main containers (hopefully divs) and the whole content will reflow nicely.
However, if your website contains fixed widths for individual elements, or if there are some images / background images with fixed width, then you will have to amend them as well.
Relatively / absolutely positioned elements will need to by amended as well.
There is no silver bullet 'make my page look nice in smaller resolution', if that's what you're looking for.
I would use javascript. I'd check user's width with document.width, then use jQuery's css() element to change what's needed.
If you really don't need to support users with horizontal resolutions less than 1200px, then why not just let them have the horizontal scrollbars?
Wrap the whole structure of the site in a (div) container that has a min-width: 1200px and be done with it.
Otherwise, if you can't stomach some users having horizontal scrollbars and you really want to maintain the beauty of the site, then you really need to get out of your way and re-design the site in a way that it gracefully degrades in lower resolutions. It definitely is not easy but it can be beautiful.
Here's an article from alistapart that discusses the techniques involved.
You can use the following CSS:
min-width:600px;
max-width:2000px;
this code will set the webpage to all resolutions between 600px to 2000px.
Related
When using the picture tag with srcset, I can define different image sources for different viewport widths.
What I want however, is to define different images sources for the actual space (width-based) the image occupies after the browser has rendered the page.
For example:
Viewport width is 1920px Website uses container size of 1200px
Container is split into two columns of 600px each
Column 2 contains an image with 100% width - which will result in a width of 600px
The srcset for the image supplies 400x300px, 800x600px and 1200x900px
The browser should now automatically know to pick 800x600px
As long as it's clear that the image will always be in that spot, I could use srcset based on the viewport width.
Unfortunately, my site design is so, that content editors can freely add columns/rows and even nest them. Also at some point columns collapse and become always full-width. So when rendering the HTML, I cannot predict how much of the viewport width an image will get.
Therfor I would love to have the browser check how much pixels the image actually has when it's rendered to the user - and choose the appropiate image.
I have searched quite a bit, but couldn't find anything about that.
Is that even possible?
Or is the only solution a Javascript one?
No, sadly this is not possible yet. There has been much talk about element queries, basically media queries that apply to the element's size, instead of the windows size. But they are apparently really complicated to integrate. There is also no syntax for it yet. The classic problem that is often brought up (in pseudo-syntax), is something like this:
.child {
width: 500px;
}
.container:min-width(450px) > .child {
width: 400px;
}
so we set .child to 500px width, BUT then we say if the child's parent is more than 450px, the .child should have a width of 400px, thus .container would be less than 450px again, and .child is set again to 500px and so on and on. This causes what is called a "circularity problem".
There are also other problems, such as with dynamic layouts and the browser not really knowing how much space an element will take up beforehand. This could lead to huge performance issues, as the browser would simply have to calculate too much.
There are however JS libraries that try to implement this (e.g. EQCSS, CSS-Element-Queries or EQJS), but for your case a selfmade JS would probably be better. I'd recommend checking out how those libraries handle it though.
More info:
https://www.xanthir.com/b4PR0
https://webdesign.tutsplus.com/articles/the-current-state-of-element-queries--cms-29690
JS Libraries:
https://elementqueries.com/
http://marcj.github.io/css-element-queries/
https://github.com/snugug/eq.js
I'm pretty new to web development and I'm having trouble making a website that I've created for my portfolio responsive. My main issue is that my website uses a sidebar navigation menu...so I'm stuck on how to incorporate that in the responsiveness. I'm thinking about using Bootstrap to make the process easier but I'm still unsure on how I could rearrange the sidebar so that it fits smaller screen sizes without making any major changes to it.
Any tips, help, suggestions will be greatly appreciated. Thanks!!
You should check out css media queries. They allow you to change the your sidebars with the size of the browser or to disable them you browser is too small.
You could use media queries or you can also use display flex for responsive behaviour: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
In css, you can use percentages when defining dimensions like so:
.sidebar{
width: 50%;
}
As long as you sidebar isn’t in any other element, it will automatically resize to 50% of the users screen. If your sidebar is contained in another element, you will have to resize the other element first.
I'm working with Visual Studio, ASP.net, HTML, CSS, C# (for the code behind), ADO.net and Javascript/Jquery.
I'm trying to make a web page with some div block and I want that the block never exceed the browser. Do you know : how to add a height size for div even if I change the resolution of my window?
PS: I'm French so, please, don't be matter about my mistake.
Without further clarification of your senario, one method is to do the following:
HTML
<div id="test">
My div
</div>
CSS
html, body {height:100%;margin:0;padding:0}
#test {width:100%; height: 100%;position:absolute;}
Setting height to 100% usually works. NOTE: Sometimes padding may push you beyond the browser.
I've encountered screen resolution problem before and this solved my problem.
If you want your website to dynamically changing whenever your screen resolution change you can use % in your css to all your page, containers, wrappers etc. so that it will adjust on any screen resolution. (problem: This destroys your web design whenever the screen resolution is big)
The best solution I find so far and I think other professional websites also is doing is to make your width static or fixed and just let your page get on the center. This will preserve the design you made on your page and everything will stay and looks as it is.
In your CSS just add this line on your page ,containers, wrappers etc. margin:0 auto;
and your site will be centered to any screen resolution. For more examples and to read more about it check this reference How to Center a Website With CSS. If you want to test different screen resolutions without changing your actual screen resolution you could try it here. Hope this helps :)
Here's the website: http://www.square1cards.com/
I'm trying to retrofit a responsive design with a sticky footer and so a lot of the CSS options we're incompatible and the fixed option really didn't satisfy either.
Since my top content (for the homepage) is a fixed height, through javascript I tried simply changing the top margin to the difference between the window height and that fixed value (when window height is greater than the fixed value). A crude hack.
If you slowly resize the browser height it works fine but when you QUICKLY resize the height it causes the footer to jump off the screen slightly. If I can resolve that, I should be ok. Any ideas?
I found Matthew James Taylor's tutorial to be very useful. It worked for me using only HTML and CSS. I would highly recommend that approach instead of using JavaScript.
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
I'm not sure what exactly you're trying to achieve, but I'm covering all known sticky footer techniques, or the techniques for what people (sometimes erroneously) call sticky footer, in this tutorial. Let us know if it helps you.
I'm working on my first responsive website and I want to know how to make all of the images resize dynamically. I've worked around it for now, but I'd really like to rethink how I did this. Is there a jquery plugin for this that is easy to implement (I don't know alot of js)? Is there a better way?
My site
You actually don't need any js for this - this could be achieved with CSS alone. As you figured out from looking at the source in the link in your comments, all that's needed for dynamically resizing an image is the max-width property set to 100%. However, if you want the image to increase in size dynamically as well then you'll have to use width:100%.
See the example in this jsFiddle. You'll notice max-width does not go past the image's resolution - on the otherhand width ensures the image fills the container (which some see as a disadvantage because they lose the resolution when the width exceeds it's original).
There is a catch though, max-width property is not supported in IE6 or below - it was only introduced in IE7. This article here provides a workaround for that though.
But resizing an image through css doesn't make an image responsive.
A 200 kb image will be 200 kb when it is 1000 px wide but also when it is resized by css to 50 px wide.
I would like to see you guys' faces when waiting untill that large images is loaded on your smartphone