Even though I've set a max width/height for my image element, it'll still extend upwards when I zoom in on the page. Any help here :)?
.column img {
width: 80%;
height:450px;
max-height:450px;
min-height:450px;
max-width:80%;
border-radius: 50%;
border: 1px solid black;
margin-bottom: 20px;
box-shadow: 6px 6px 6px #000;
}
website 100% view
website 120% view
I know 1 way to solve this if you want with CSS only.
With CSS: you can make break points in your page. So in resolutions that you set your page will be responsive. You can check This . And you can not use (%) for solve your problem. Only with px. If you set
height:450px;width:450px;
this will work for the circle but will not be responsive. And the px of width must be the same with height. And the BootStrap is some files that can help you with the responsive design.
Related
need some help with a website I'm working on.
Portrait mode on Android looks like this:
Now, landscape, no css change:
No problem whatsoever. Follow me to the next screenshot illustrating what happens on iOs Safari/Chrome in portrait mode. Everything fine:
Landscape mode goes to "fullscreen" since it's an SE so I figured the screen, being quite small, goes full screen and that still looks fine.
I can scroll through the content no problem. However, when I click a link to go to another page this happens:
The behavior of the page is quite simple: the scrollable content is inside a div which is the rounded one which mustn't move during scrolling. What happens is that the rounded div is set to be 100% height of the screen and when top and bottom navbars appear on iOs, the rounded div won't change its height to adapt to the usable screen part.
body css is as following:
body {
margin: 0;
height: 100%;
overflow: hidden;
-webkit-text-size-adjust: 100%; }
while rounded corners div is managed like this:
.rcorners {
position: absolute;
margin-top:15px;
margin-bottom:15px;
margin-left:15px;
margin-right:15px;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%-20px;
height: 100%-20px;
background-color: white;
border-radius: 10px;
-moz-box-shadow: 0 0 6px 2px #C0C0C0;
-webkit-box-shadow: 0 0 6px 2px #C0C0C0;
box-shadow: 0 0 6px 2px #C0C0C0;
overflow:hidden; }
Any ideas on how to make the height right everytime the usable screen size changes?
Thank you
So sadly iOS has been notorious for this type of stuff for what seems years. First it was the top address bar, and now it is the browser menu. So you have a couple options. YOu can set a media query for landscape and shorten the height of that container and just have it scroll if you need. Could probably drop font-size too. Or there are a couple options in this article that might help.
You could also try 100vh instead as well. As that will make it the full height of the available viewport which I have seen at times act the way I needed it to vs 100% height.
https://www.eventbrite.com/engineering/mobile-safari-why/
I am trying to stick my pop up to top and make it a bit smaller to fit the screen.
Here is my landing page URL - yogavoga.com/2weekdiet
Any help will be appreciated.
.modal-content {
margin: 5px auto;
background-color: #fefefe;
border: 1px solid #888;border-width:3px;
width: 90%;
}
I'm not sure if this solves your question in full, because your sample code is a bit short and it doesn't show the element itself. I tried visiting your website, but can't find the element. So it is very difficult for us to say what you actually want.
margin is the space around your div element, in this case your modal. With your code you say your browser to put your element at the top, (0 margin at the top), and do the rest automatically. It does that and will center your element based on the width of your element.
You can scale your element with width. Make it smaller by reducing the percentage.
.modal-content {
margin: 0 auto; // 0 from top, left, bottom and right auto.
background-color: #fefefe;
border: 1px solid #888;
border-width: 3px;
width: 60%; // Width of your element.
}
TIP: remove the margin and padding presets from your body to have your element at the absolute browser border.
I have a center box which is 90% of the page, this is because at 100% is leaves a blank space to scroll. Either way my issue at the moment is I have a page with quite a lot of content, and it goes off the bottom of the center box. I would set the hight to auto, but then on pages like my home page, the center box is too small on larger screens, making look bad.
Heres the CSS:
#centerBox {
width:70%;
min-height: 90%;
height: auto;
background:#ffffff;
text-align: center;
margin:0 auto;
-moz-box-shadow:0px 3px 3px 3px #737374;
-webkit-box-shadow:0px 3px 3px 3px #737374;
box-shadow:0px 3px 3px 3px #737374;
min-height:500px;
Any help will be appreciated!
Thanks,
James
firstly if upon giving 100% width, horizontal scroll comes then reset the layout
body
{
margin:0;
padding:0;
}
now, for your large content, always leave your height to auto i.e. height:auto
but it causes one problem, when there is no content, height will be too small.
what you can do is you can employ jquery to control the height.
leave entire css as it is and do this.
document.ready(function(){
if($('.content-container').height()<200)
$('.content-container').height('500');
});
where $('.content-container') points to the required div i.e. content which want to scale
While developing, lets say i declared the following css properties
.buttons-pos {
/*margin: 0px 20px;*/
padding: 10px;
display:inline-block;
overflow:hidden;
height:20px;
position: relative;
right:-550px;
background-color: #E6E6E6;
position: relative;
text-align: justify;
border: 1px solid;
border-color: #E6E6E6;
border-radius: 3px;
}
css for two blue buttons:
.checksheet {
/*margin: 0px 20px;*/
left: 400px;
top: 45px;
position: relative;
}
.nchecksheet {
/*margin: 0px 20px;*/
left: 680px;
top:2px;
position: relative;
}
This looks perfectly fine in my computer but when i check at other computers.. the position is all messed up?
What is a way to solve this issue?
Attached screen shot.
Ignore the gray bar...for now..
The blue buttons you see..
That is the in the center of screen in my laptop..
But here.. it has shifted to left.
If I look this in my laptop..
The blue buttons will be in the center of my screen
but the gray bar will be shifted on right..
I didn't go through your code in depth, but your problem is almost certainly because of hardcoding the positions and dimensions in pixels. When you design on a higher resolution device and later check on lower resolutions devices, you'll find that your layout is messed up.
You should probably use percentages in laying out your page if you want it to be fluid.
Another solution, which might suit your needs better is designing for the lowest common denominator. This essentially means, in this case, that you decide what the lowest resolution your page will be displayed on is, and then design for that resolution, centering the page for other resolutions.
I`m using this one but it doesnt work in other screen sizes:-
body {
background-color:#333;
margin-left: 0px;
margin-top: 0px;
border-right-width: 20px;
border-left-width: 20px;
margin-right: 0px;
margin-bottom: 0px;
background-repeat: no-repeat;
size:100%;
background-size:100%;
overflow-x:hidden;
overflow-y: visible;
}
I'm not sure what you mean by "control the size" - you could set an explicit height and width, or use percentages to achieve a fluid layout. Can you explain what you're trying to do?
first of all do margin:0; and you can control the page size by using width and height
I do not really get why you have x-repeat when you have no image.
your border code needs
border-style:solid;
if you don not want to use solid, there are other choices
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
height & width.
http://www.w3schools.com/css/pr_dim_height.asp
http://www.w3schools.com/css/pr_dim_width.asp
(I don't really recommend using w3school for other things since it is really outdated.)