how to set default resolution for web page - css

This is my website http://kaybs.in/Medical/index.html, my problem is how to set a default resolution for this webpage to look same in all monitors,how to fix the css ?

maybe it help you
body {
max-width: 1000px;
}

Seeing your website try reading media queries and set your image(carousel) for a max-width so it doesn't get stretched.
Try reading this:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
http://mediaqueri.es/
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

Related

How to decrease component size with screen size like amazon website?

This is a full-screen view of the amazon website
This is responsive view
I want to do like this how can I do that using CSS
I would suggest you to read this post
https://stackoverflow.com/help/how-to-ask
Specifically we could get more information about what you have already tried doing.
You can use css media queries to manipulate the layout of the website.
reference link
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
I suggest u for using bootstrap. It's easier way to learn responsive website
https://getbootstrap.com/docs/4.0/getting-started/introduction/
After that, u can build miniproject to learn it.

How do I set this messy placeholder in iPhone?

I make this form but when i check in my mobile i.e oppo it's look like this: Image
When I check this in iPhone it looks messy: Image
You can try following CSS to fix this issue:
line-height: 1;

Responsive Images on Wordpress Blog

On this webpage (actually, the entire blog section), some images are responsive, and some are not. When I try to put a max-width on the images, they don't fit within the confines of the parent. Is anyone a little wiser about what could be happening here, especially when it's not happening elsewhere on the site?
Appreciate it!
http://www.sensoft.ca/blog/never-know-youll-find/
Add following CSS to your theme's Style.css file:
.wp-caption {
max-width: 100%;
}

How do I make Highslide thumbstrip scrollable?

I wonder how to make a highslide thumbstrip scrollable for cases when there are too many thumbnails to fit into it.
I've got a highslide gallery here: http://civicsector.org.ua/multimeda/foto/208-akcya-geroyi-nezalezhnost.html
However, the thumbnails in it get oblated so that all of them fit into the thumbstrip. Instead, I want them to keep the aspect ratio and to make the thumbstrip scrollable, just like here: http://www.roadrash.no/hs-support/gallery-in-page+caption-above-thumbstrip.html
It seems that my code is identical to what is in the example page, but for some reason the output is different.
Could please anyone help me with it?
Thanks.
Bootstrap's CSS (bootstrap.css:101) is clonflicting with Highslide, add this to your CSS
.highslide-thumbstrip-horizontal img
{
max-width: inherit;
}
Your own CSS is colliding with the Highslide JS CSS. In the bootstrap.css file, lines 101 and following, you have this:
img {
...
max-width: 100%;
...
}
Remove that max-width attribute.

Google Maps Street View Icon Missing

The Person Icon that represents the Street View on Google maps seems to be having issue on my insert. I am using the v3 api and The Icon placement is there but the icon seems missing or distorted.
If you look at the image something is there but it disappears on hover. Any ideas what could cause this.
I believe its could be to do with some of my pages code as if i do a vanilla version it seems ok, but i am not targeting this at all and was wondering if anyone else has come across this and might have an idea etc
This is definitely a CSS issue. Look for CSS that is applying to all images like:
img {
max-width: 100%;
}
Select only Google Maps and keep the rest of your site responsive
.gm-style img {
max-width: none;
}
Just set:
img {
max-width: none;
}

Resources