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;
}
}
Related
I was searching about how to make your webpage fits any screen resolution and I found that most answers prefer using % over Pixels. I found that this is correct when I viewed the code of this website http://zcsfestival.com/
you can find objects overlap in mobile resolution or when you don't maximize the window of your browser. However, when I read the code of this site http://m3adikawmia.eb2a.com/?ckattempt=1
I found that it uses Pixels and it fits any screen resolution also when I restore the browser window down. It seems perfect. I became confused about that and I want any clarification about this point.
Thanks in advnace,
One way is to define elements with % . But some times the elements will be to small in mobile resolution that it is necessary to define different CSS codes for different resolutions. Like this:
normal situation:
.container {width: 1000px;}
responsive:
#media only screen and (max-width:800px) {
/* redefining some element sizes like the example: */
.container {width:100%;}
}
And this way will continue till mobile resolution.
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
I have a website that I made (without bootstrap or any or that stuff, and I am having an issue trying to scale everything down for people with a smaller screen resolution. basically I'll want it to detect the size, and apply appropriate CSS classes to elements to scale everything down if under a specific width. Right now I am just trying to build the CSS classes, and I am having some difficulties. The closest I've gotten is shrinking all the content down using:
transform: scale(.75);
That works awesome on the actual content for resizing, but I'm left with a large padded field around the content. a bit hard to explain, but what I want is for the content to shrink, but the divs to still be 100% of the browser (so if there is a smaller browser it fits nicely without this stupid large padded area around the content)
Here is how it normally looks:
image!
and here is how it looks with the added CSS transform:image2!
Any ideas for how to overcome this would be greatly appreciated, Also note I really don't care about my solution not working in IE9 or lower!
The basic output that I want is the equivelent of shrinking the browser zoom to 75% if that helps..
Depending on how your CSS is written, something as simple as this could work:
#media only screen and (max-width: 600px) {
body {font-size: 85%;}
}
If you have divs with em widths that will shrink their width, but you could change that via the media query above, perhaps setting their widths to 100% etc.
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
I am trying the carousel example here http://getbootstrap.com/javascript/#carousel with image of 1200x300. It looks fine in large screen with width more than 1200. However when I reduce the browser width the image in the carousel decrease and it looks thin.
Is there any trick to have kind of minimum height applied to the image within carousel.
You can use CSS media queries to achieve what you need.
Basically what I think is happening as I don't have any code to look at is that you have responsive bootstrap on which you need to turn off otherwise bootstrap cleverly resizes the objects on the page.
Also I noticed that if you resize the image http://placehold.it/1200x300 then it shrinks though that might not affect it at all
If you set max-width: 100%; height: auto; on the img, it will retain it's aspect ratio (i.e. remain the correct shape) no matter how narrow you make it.