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.
Related
I'm building an website with reactjs and I want to achieve something like Instagram. So when a user access this website in pc they should be seeing navbar and if the user access it on Thier phone then they should be seeing bottom tab navigation and navbar should be hidden. I'm also attaching my design photo's of both desktop and mobile UI so you guys can have better idea. Also I'm not using any UI library just plain simple reactjs.
Rather than doing any other way, I would recommend you to use a media query of CSS. It will make your life easy.
You just have to instruct what part of code you want to hide.
Suppose the class of your navbar is then just put as below in media query and put CDN of bootstrap to your page.
i.e.
#media query("Size for what you want to hide navbar)(i.e. 480px or 320px)
.nav {
visibility; hidden;
}
The simplest solutions to this would be to have two versions of navbars.
a Nav, and a NavMobile.
You can use css media queries to hide/show them as per min/max screen size, this is one of the most common practices
I made the download of several free responsive layout (you can find them simply through google if you're curious) and I see that the layout has at least one or two javascript files.
The question is: javascript is essential to create a responsive layout?
Then, in the reply to this question is "no" and you have also the possibility to link a free responsive layout made only with html and css, well, you will receive a wonderfull BIG thank you.
The whole point of responsive layouts is that it can (and should) be done with CSS3 media queries only.
However, this can often require some clever HTML design, especially if you want to have a slide-in menu (hint: :active can be very powerful when combined with tabindex to make an otherwise "inert" element respond to click events like a link) and many developers just can't be bothered with that, especially when jQuery is so readily available.
So basically, yes, you can make a responsive layout with CSS only. And if you succeed, congratulations! JavaScript can be used to make things easier, but in general if you think you need it, you probably just need to rethink how you're doing things.
Unfortunately, I have no links to JavaScript-less responsive layouts for you, that's because I'm very DIM - Doin' It Meself!
Edit back While I appreciate Martijn's demonstration of a use of JavaScript in making images essentially have variable resolution depending on screen size, images can be made responsive simply by using SVG if possible. If this is not an option, consider using a container with a background-image - only the image that matches the media query will be loaded :)
Sometimes yes, sometimes no.
First understand what is response layout: Responsive Layout is the one that dynamically changes itself. Depending on the Browser's screen size. So that it fits perfectly on every screen type, size, resolution etc. So that the website's layout doesn't break.
You can just use CSS3 media query to change the layout, or else you can use jQuery or some other JavaScript to make this happen.
But remember, JavaScript is not required to make the document Responsive.
Sometimes Yes!
Sometimes the developer is better in writing the code using JavaScript, such as jQuery API. So he would find it easy to write the code in jQuery to dynamically handle all the events in the Browser window to make a website Responsive.
I myself would find it pretty easy to write the code in jQuery as compared to CSS. So for that purpose, I would have to add the jQuery source file to the document to render it that way. Otherwise I won't be able to create the responsiveness in the Website or would have to stick to the pure JavaScript
Example would be:
if($(window).width() > '1300') {
$('body').css({
'height': '100%' /* etc */
});
}
Sometimes No!
Some developers are good at CSS (CSS3, and its media Queries too). So they try using CSS3 to render the document and make it responsive.
CSS3 is really much easy than jQuery and it would be helpfull to use it. It would also won't require any of the Script file to be included. You can easily write the code, in the default CSS file. And the changes would be made accordingly.
#media only screen and (max-width: 1300px) {
body {
height: 100%;
}
}
But Remember
If you use plain CSS and then use CSS3 Media Queries to change the layout of the website, you will be able to just detect the screen size and other elements. You won't be able to check for the Browser's properties or the content on the screen etc.
Both answers are acceptable.
No, if you pretend to work with something like a flash site, which I hardly discourage it.
Yes, because javascript is essential to do that, CSS3/HTML5 are solutions to your case, but, they come with some javascript included functions, that you will not see, so, there is javascript.
Responsive by Default
No, you do not need JavaScript for Responsive Webdesign. It is necessary for those cool fly outs and sliding effects.
If you do a website in pure CSS, you might need to take some compromises like a different menu layout or always visible sidebar content. Sliders are a problem.
But consider this:
If you think about it, responsive layout is not a new thing. Open a simple HTML file in a web browser, and the content automatically adapts to fit the width of that browser. The web is responsive on its own—by default. It's us that's been breaking it all these years by placing content in fixed-width containers.
Andy Hume in "Responsive by Default",
http://blog.andyhume.net/responsive-by-default/
Media queries allows you, to do responsive pages with css only. But you should remember about jquery function '.resize()' when user change horizontal layout to vertical on phone or tablet.
I am just starting with both media queries and viewport statements. Is this what is used to create websites like the following ?
http://html5up.net/escape-velocity/
http://www.sitediscount.ru/parallaxer3bs/index.htm
What I am trying to achieve is a full page / viewport on all screen sizes. Then on scroll to the next section below is also filled with the viewing area. This is a new popular type web desin and I am trying to figure out how to replicate it. Either html5 or bootstrap solutions would be great. Thanks in advance.
Short answer: Yes, media-queries is the main way to go in order to create fluid layouts.
If you're just starting out, I would recommend you to learn writing these from scratch in order to get an understanding. There is a good article available at http://css-tricks.com/css-media-queries/
However, if you do not wish to code the media-queries yourself; that kind of pages with a fluid responsive layout can easily be made with bootstrap.
To download bootstrap, go to http://getbootstrap.com and start working from there.
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 :)
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.