I want to create a sidebar navigation with an image as background. Image cannot be repeated. So i need its height to be always resizing according to different screen sizes. Please guide
you can use of response css for your sidebar like this
#media screen and (min-height: 820px){}
or you can use of jquery function method like this
$(window).on('resize', function(){ } );
Related
I want to have resizable border with following building silhouette. Can just make that like background image of this block.
But when this comes to different screen size with current approach I have to have different bg image for each screen size.
One of idea is get this building image and with position absolute and media query set that on place that I want, but I believe that is better way to achieve that.
CSS media query will help you out check out small code given below.
Hope it may help !!
.imagePart{
background-image : url('img1.png');
}
//max width based on your needs
#media screen and (max-width : 680px){
.imagePart{
background-image : url('img2.png');
}
}
Web page before zoom in
Web page after zoom in
When i zoom in my web page that time two side bar menu div overlapping, How i stop that overlapping .Please help.
Please see left bottom footer div and left side menu bar .This two overlapping after zoom in
Zooming in/out changes the resolution so first if your website is not responsive, you should stop zooming in/out.
If above is not the case and you want to fix the issue and as the question is not tagged with any responsive UI framework like bootstrap, assuming you are using only html+css, you can go for media query css
Using media query CSS you can handle CSS of any specific section for different screen resolution, below is an example:
Let's say if the browser window is 600px or smaller, you want to change the background color to light blue, then you can use below media query CSS:
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
I am working on a website which I coded from scratch.
I am using the following to help me insert captions on to my carousel slides which is working quite well:
Adding text over an image in Bootstrap carousel
Everything is responsive. The only issue is that when I minimize the page to mobile size the captions appear on top of the slides. Is there any way to make them disappear once the page reaches a certain size?
Thank you!
You can use a css media query.
Just add a style rule to your css files, for example something like:
#media only screen and (max-width: 500px) {
.caption {
display: hidden;
}
}
For max-width you can of course use any pixel value you like. All styles inside of the media query are only applied if the condition is met, so in this case, if the screen width is 500px or less.
To put it simply, when decreasing the size of your browser window, for mobile device view, the top buttons get pushed to the left, underneath the clients name and finally ends up in a Menu subfolder. Not being a web designer, although I am trying hard to learn, what I would like to see is the Menu subfolder react a lot sooner, before the button end up under the clients name. Being a free template of which I am trying to redesign, I looked under style.css and responsive.css but I'm not sure what I should be looking for. Any help with this matter would be very much appreciated.
http://landonmusicgroup.com/victoria_update_test/index.html
Thank you!
I would suggest smaller icons in general with less padding on the left and ride sides. This will create smaller icons that are closer together. You would likely have to scale the browser to ensure that the icons all fit before the media queries break to a single menu button at 767px.
The more efficient option would be to adjust the icons size and the logo size depending on the media query. For example, you have a media query in that template from around 980px to 1300px. If possible, in your template adjust the logo sizing and icon sizing to make sure that within that range, everything fits.
If you like the bigger icons, that is okay, you just must make sure that the bigger sized icons and logo do not take effect until after the window is over 1300px. Anything between 980px and 1300px is going to require smaller icons, smaller logotype, or a new arrangement altogether to avoid the line break.
Media queries are used like so:
//This section affects anything bigger than 480px
#media screen and (min-width: 480px) {
body {
//insert width and height
}
}
//This section affects anything bigger than 767px
#media screen and (min-width: 767px) {
li {
//insert width and height
}
}
//This section affects anything bigger than 980px
#media screen and (min-width: 980px) {
li {
//insert width and height
}
}
//This section affects anything bigger than 1300px
#media screen and (min-width: 1300px) {
li {
//insert width and height
}
}
I'm trying to learn about the 960 grid, and was looking at Skeleton.
http://www.getskeleton.com
If you visit the page, you will notice that while the right side of the page scrolls up and down, the left side is fixed (sidebar) always remains in place. If you shrink the browser window passed a point, the sidebar disappears.
I've looked at the css, and can't find anything about how this sidebar works. How did he do it?
The sidebar uses position:fixed; to stay where it is. The responsive side (re-sizing the browser) is most likely the use of media queries. Example:
#media only screen and (max-width: 999px){
//if screen is less than or equal to 999px (just a random number) execute this code
}
#media only screen and (min-width: 1000px){
//if screen is greater than or equal to 1000px (just a random number) execute this code
}
UPDATE
RESIZE THE BROWSER