I just started debugging my ASP.NET website on my android and noticed that the fixed navbar does not grow/shrink when I zoom in/out. Instead it always shows the top-left of the navbar and the navbar stays the same size.
If I switch to static navbar then it scales perfectly when I zoom in/out. Is this a known problem or have I missed something/done something wrong?
Is there maybe a way to make the navbar static on cellphone only? and fixed on desktop?
I don't have enough reputation to comment on your question so I have to post this as an answer.
Have you tried using media queries that change the height of the the navbar? Have in mind that you might need to use additional media queries for the items in the navbar, e.g. input, buttons, text size etc.
#media screen and (max-width: your-desired-width-in-px) {
#id-of-the-navbar {
height: desired-value-in-em/px/%;
}
}
One quick way of doing that could be to use media queries
Related
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 have a problem when loading the mockup of my project on an iPhone.
The problem is that on my mobile device, most 100% containers seem to have some kind of a right margin or padding, which leads to content crash.
I really think that probably this is due to "viewport" stuff, which I don't know for now, but anyway, take a look.
when seen your screenshot, Your code is up to date, when I put my image in your code then it's working fine, so you can check your image width and check css
check with this #0a1a19 url("../img/img2.png") no-repeat scroll center center / 100% 100%;
If you want to make responsive then use bootstrap and you can get from here....Bootstrap
But you are used custom css so you need to use media query for different layouts like, tablet, mobile, etc...
and one more thing if you not getting perfect layout in your mobile view then must check your media query for mobile view.
Note: always use % (not px) to give the width of any image.
.header__inner has fixed width, change width to 100% and remove padding for mobile devices:
#media <params go here> {
.header__inner, .header__inner_mod {
width: 100%;
padding: 0;
}
}
Codepen
Website slider is not working properly, when the screen resolution 1920 x 1200, slider image looks fine. when the screen resolution size like 1366 X 768 slider is cut left and right side, its not reduce automatically. is it any way we rectify this issue. website link is given below
http://www.newtonclients.com/testing/index6.html
Some script is calculating the size of images in slider, and it isn't works well. I think it is probably based on window height, but should be just based on full width.
I think you should disable this script and just use .img-responsive Bootstrap class. Actually you can use Bootstrap carousel module, which is easier to implementation and for sure less bugy ;)
I will also improve this site experience, it looks very "heavy" and even scrolling cuts the screen.
To make it responsive, by default slider is moving it towards left by adding high value of margin-left. Which leads to your issue.
You can try fixing it by overwriting default css by your own. Add below snippet to your css file. And you can change the margin value and width as per your preference.
This will stretch image little bit. Hope this works.
#media only screen and (max-width: 1366px) {
.ms-slide .ms-slide-bgcont img{
margin-left:-100px!important;
width:126%!important;
max-height:auto!important;
}
}
I'm not a very talented web designer, so I'm having trouble to make my webpage stay in tact when the browser changes its size. It gets all messy and it looks awful.
When the browser is at its full size, the page looks fine.
This is how it looks like before re-sizing the browser:
And this is how it looks after making the browser smaller:
This happens only when you re-size the browser horizontally.
This is my CSS: http://pastebin.com/SfKT0Eth
I can't figure out my mistake since I'm not very good in HTML/CSS. That's not my area so I'm lacking the knowledge to figure this out myself.
I would appreciate your help.
EDIT
I fixed the problem with the sidebar and the dark content space. What I'm failing to achieve is prevent the upper menu (top-nav) items to fall down when the screen gets small.
I simply changed this in #sidebar:
width: 270px;
to
width: 19%;
http://jsfiddle.net/J3jm7/3/
Hi just i see your fiddle ... there are a few problems:
Number one you're setting the width with % this takes it in relation with the browsers size, you can set min-width and max-wdith to avoid this problem.
Try to put first in your html the box that is float:left and after the box float:right
I don't understand why you use postion:absolute for the outer div.
View this demo with your Fiddle fixed http://jsfiddle.net/J3jm7/15/
First of all you should really make a Jsfiddle with your question as with css alone I can't really see what is going on.
Now as far as I can see you are using absolute values for width in some elements. You should take a look at using % values. Also you should look into media queries through css. For example your side bar would be better if it was hidden or position below your main window when the browser gets really small width.
You could achieve something like that by using something like
#media screen and (max-width: 800px){
#sidebar {
display:none;
}
This would hide the sidebar if the browser window get resized below 800px width
or
#media screen and (max-width: 800px){
#sidebar {
float:none;
width:100%
}
This would have the sidebar get below your main window and size it to the full width of its parent element if the browser window get resized below 800px width
The media queries should of course coexist with your rest of css
Ah, I see you've added a fiddle. well if you want to keep your sidebar at 270px width you could do this with the container
.container {
width: calc(100% - 275px);
...
...
}
Very simply speaking it is hard to debug without a staging URL to look at. Anyway, your issue is because you are not using fluid development practices. Maybe try to google up how to develop fluid development. The idea is to use % and em and a base css font size. Also, you may wanna look at bootstrap3.
Looks like you are coming in on the ground floor. The best resource to getting started in this area is Responsive Web Design by Ethan Marcotte. Check it out here: http://www.abookapart.com/products/responsive-web-design
As the title suggest, I'm having issues with creating my website.
It's currently at the design stage and I'm having problems upon putting my browser into windowed mode.
Everything sort of re-aranges it self. If you scroll a bit you see some sections falling out of order.
I don't know what I did wrong, but I would very much like to fix this issue.
This is the link to my website as it stands:
http://www.dennis-website.co.nf/index.html
There's no minimum width set to the overall site. Your #container_main has width set at 1002px where as the rest of the site doesn't so the header and menu will collapse to the browser's width. You can quickly solve this by setting
#wrapper {
min-width: 1002px;
}
So the overall site has a minimum width.
You need to use Media queries to adjust the font size, width of the elements and much more for various screen resolutions.
Example: http://webdesignerwall.com/tutorials/css3-media-queries
You have to make a responsive design website to overcome this issue. Here is a great book on Responsive Design by Ethan Marcotte. It will cover all topics of how to make responsive grid, responsive images and media queries + this is only 150 pages small free pdf :D
<div id="nav">
Your CSS must be:
#nav
{
width:100%
}