Im busy designing my portfolio website and I have some images that I want to be able to scale correctly to the size of the browser or device. I have been messing around with vw and it seems to solve the problem quite nicely. However due to being a student im looking at making sure the code is solid in that it wont be affected on different browsers or devices.
So the main problem here is when I use % on one image to adjust the height, the image dissapears completely. I can only make it appear in the correct position using either px or vw and was trying to find out why? (Take note I am only needing to adjust the height, id like to be able to use % otherwise I end up with a huge gap when scaling it down to smaller devices and browsers)
Here is my CSS:
/*----------------------------Top ----------------------------*/
.topwrap{
position:relative;
top:50px;
}
.face{
position:relative;
float:right;
background:url(../images/face2.png) no-repeat;
background-size:100%;
top:10%;
width:50%;
height:15vw;
right:16%;
min-width:160px;
}
.txtwrap{
position:absolute;
margin-top:1.3%;
font-size:1.3vw;
float:right;
right:39%;
text-align: center;
}
.sptxt{
color:#171717;
font-weight:bold;
}
.sptxt2{
color:#171717;
font-weight:400;
}
/*----------------------------Lower----------------------------*/
.lowerwrap{
position:relative;
float:left;
height:100%;
width:100%;
top:50px;
padding-top:10px;
box-shadow: 0px 10px #333 inset;
}
.contentwrap{
position:relative;
width:100%;
height:15vw;
background:url(../images/content.png) no-repeat;
background-size:100%;
display: block;
z-index:1;
}
body{ font-size: 16px }
#media screen and (max-width: XXXpx) {body { font-size: 12px } }
#media screen and (max-width: XXXpx) {body { font-size: 8px } }
for the rest of your code, such as padding, margin you can use em/rem,
if will scale well, according to the font-size of body; that way your "GAP" between image will resize as well.
Related
Is there any way to define the height of a div without it being fixed to that defined size? For example setting a div to 200px it will be locked to that, and so when it scales it wont change.
I know that you can use % but when I try to do this my image disappears so im forced to using units like px or vw, and im not sure how to create a fluid design without being locked into a specific set size.
Here is my code. I'm wanting .face background image to appear but by using a % it no matter how big I make it, it wont show the image. If I add a px or vw number to its container .topwrap it then creates a large gap to the div container .lowerwrap. So basically I'm trying to find a way to get the image to display itself in a correctly sized div that is able to scale to browser size.
/*----------------------------Top ----------------------------*/
.topwrap{
position:relative;
top:50px;
height:auto;
}
.face{
position:relative;
float:right;
background:url(../images/face2.png) no-repeat;
background-size:100%;
top:10%;
width:50%;
height:200%;
display: flex;
right:16%;
display: block;
min-width:160px;
}
.txtwrap{
position:absolute;
margin-top:1.3%;
font-size:1.3vw;
float:right;
right:39%;
text-align: center;
}
.sptxt{
color:#171717;
font-weight:bold;
}
.sptxt2{
color:#171717;
font-weight:400;
}
/*----------------------------Lower----------------------------*/
.lowerwrap{
position:relative;
float:left;
width:100%;
height:300px;
top:50px;
padding-top:10px;
display: flex;
box-shadow: 0px 10px #333 inset;
}
.contentwrap{
position:relative;
width:100%;
background:url(../images/content.png) no-repeat;
background-size:100%;
display: block;
z-index:1;
}
/*----------------------------Footer----------------------------*/
.footerwrap{
position:relative;
float:left;
width:100%;
background:#09C;
top:50px;
text-align:center;
}
.foottxt{
text-align: center;
font-family: 'Roboto', sans-serif;
font-size:0.5vw;
color:#FFFFFF;
font-weight:200;
z-index:300;
}
Since we cannot see the HTML that you are applying your styles to, it is difficult to provide a solution. Have you tried using the following on the .face class?
min-height: 200px;
If you want to allow a <div class="face"> element to resize fluidly based on that percentage width, but maintain a given aspect ratio, try replacing your .face rule set with this:
.face {
position:relative;
float:right;
background:url(../images/face2.png) no-repeat;
background-size:100%;
top:10%;
width:50%;
right:16%;
display: block;
min-width:160px;
}
.face:before {
display: block;
content: '';
padding-top: 100%;
}
The above code assumes face2.png's height and width are the same (a square image, or 1:1 aspect ratio). To make div.face fit your actual image, divide your image's height by its width in pixels, multiply that by 100%, and use that for .face:before's padding-top value. For example, if face2.png is 180px tall by 120px wide, use padding-top: 150%;.
See: http://www.goldenapplewebdesign.com/responsive-aspect-ratios-with-pure-css/
I have this html code bellow representing a small panel, this panel should be set to any type of screen, but it has the following rule:
When the resolution is 800x600 or lower it stops to adjust (stay with 800x600), when the screen
resolution is 4K (4096x2160) or higher it stops to adjust (stay with 4096x2160).
in this cade the minimal resolution is 800x600 and the max resolution is 4096x2160. For that I try this code:
<div id="topo" style="background:#EEEEEE; border:1px solid #BBBBBB; height:10%; width:100%; border-radius:5px; position: relative; min-width:923px; min-height:88px; max-width:1908px; max-height:110px;">
</div>
<div style="float:left; width:100%; min-width:923px; max-width:1920px; height:90%; max-height:1080px; min-height:720px;">
<div id="Menu_B" style="background:#EEEEEE; text-align:center; border:1px solid #BBBBBB; max-width:764px; max-height:428px; min-height:401px; height:44.1%; width:40%; min-width:370px; border-radius:5px; position: relative; margin-top:5px; float: left; text-align:center; ">
</div>
<div id="Menu_left" style="background:#EEEEEE; text-align:center; border:1px solid #BBBBBB; max-width:1125px; max-height:861px; height:89%; min-height:805px; width:59.2%; border-radius:5px; font-family: 'Droid Sans', sans-serif; position: relative; margin-top:5px; float:right; min-width:547px;">
</div>
<div id="Menu_C" style="background:#EEEEEE; text-align:center; border:1px solid #BBBBBB; max-width:764px; max-height:428px; min-height:401px; height:44.1%; width:40%; min-width:370px; border-radius:5px; position: relative; margin-top:5px; float: left;">
</div>
</div>
And you can test it in this Website, I think the problem is in max-width, max-height, min-width, min-height that are in pixels mode instead of percentages, right? Need javascript to do that?
How can I solve this design problem and put that idea to work?
First of all, stop inline CSS properties into HTML and move them to CSS file.
Than you can use Media queries which allows you to have the separate rules for the various screen resolutions.
So, your CSS should look like the following:
.typo {
background:#EEEEEE;
border:1px solid #BBBBBB;
border-radius:5px;
height:10%;
max-height:110px;
width: 100%;
}
#media only screen and (max-width: 800px)
{
.typo {
min-width: 800px;
}
}
#media only screen and (min-width: 4096px)
{
.typo {
max-width: 4096px;
}
}
<div id="topo" class='typo'>Typo text</div>
Try to run this code in the full screen; resize the browser window.
You can change the dimensions of the divs to percentages. Then you just need to set the width and height of the body element. You can use window.innerWidth to constrain its dimensions.
var body= document.querySelector('body');
if(window.innerWidth < 800) {
body.style.cssText= 'width:800px;height:600px';
}
else if(window.innerWidth > 4096) {
body.style.cssText= 'width:4096px;height:2160px';
}
Fiddle
I made a header(menu) for my website from the left side to right side (like in this image)
and it works. But when I resize web browser right side of header gets cut down (image)
my code:
#header {
width:auto;
height:50px;
background-color:#ffffff;
margin-bottom:10px;
border-bottom:1px solid #ccc;
}
#headercontainer {
width:980px;
margin:0px auto;
}
Use percentage values for better flow. If you want more customization on how you want your website to behave in different screens use media queries. Here is a good tutorial
#headercontainer {
width:75%;
margin:0px auto;
}
Don't use px in width, make your width size in percent like
#headercontainer
{
width: 80%;
margin: 0px auto;
}
#header {
width:100%;
height:50px;
background-color:#ffffff;
margin:0 auto 10px;
border-bottom:1px solid #ccc;
}
if you use auto, the header will adjust to the required width, so you need 100% . Of course, just trying to figure what your html looks like since you didn't include it, but in 9 out of 10 situations, this is what you need
My first attempt using bootstrap on a webapp - this is how it renders on my iPhone.
Why is everything showing up under 100% width?
Example: The top of the page is called dark container, a wrapper with an image embedded, this is the css
#darkcontainer {
height:200px;
width:100%;
border: none;
background-color:whitesmoke;
text-align:center;
}
My guess is that the image beneath(part of a slider) is pushing everything under 100% because it is much larger? That slider has the following css
#slides {
height:500px;
width:1065px;
margin: 0 auto;
ul.pagination {
width:100%;
text-align: center;
li {
display:inline-block;
}
}
}
.slides_container {
width:1065px;
height:500px;
}
.slides_container div {
width:1065px;
height:500px;
display:block;
}
The mailing list looks like it would be different, because there is more of the background color there before it turns white, but that's just... a 100% width wrapper centering the child
#autoheightwrap {
height:auto;
width:100%;
background-color:whitesmoke;
}
#mailform {
height:100%;
width:600px;
margin: 0 auto;
background-color: whitesmoke;
padding: 6px 12px;
...
Feel free to look at the website in your browser here.
Any ideas why it is being rendered this way?
#slides is set at a width of 1065px. This is the culprit that is breaking your site. You'll have to restyle it with a media query targeting mobile.
For a more responsive friendly slideshow, might I suggest cycle2?
I'd like to vertically align multiple lines of text to the right of a left-floated image.
However
The image size (height and width) will vary and is unknown in advance
The length of text varies also and will usually comprise multiple lines
Solution needs to be responsive to adapt to varied screen sizes
Solutions should not involve specific px width or height dimensions for images, divs or anything else
I don't want to use tables as the text will need to drop underneath the image in certain scenarios when there isn't enough room for the text beside the image
I've looked back through previous questions but nothing quite matches what I am looking for. It needs to work on any device so I can't use absolute px values for any dimension.
How should I style the following to achieve that?
<img src="image.jpg" >
<p>Here is the text that should go to the right of the image</p>
Thanks for any help.
This will get you started: jsFiddle example - look below for a better method.
Basically, vertical-align:middle and display:inline-block are used on both the p and the img elements for centering.
HTML
<div class="element">
<img src="http://placehold.it/150x150"/>
<p>Lorem Ipsum is simply dummy text </p>
</div>
CSS
.element {
background:rgb(134, 226, 255);
margin:10px;
}
p {
display:inline-block;
margin:0px;
width:70%;
background:white;
vertical-align:middle;
}
img {
display:inline-block;
vertical-align:middle;
}
Here is better approach using display:table/display:table-cell Same HTML..
jsFiddle example - semi-responsive... Other jsFiddle example - responsive img elements..
CSS
.element {
width:100%;
display:table;
background:rgb(134, 226, 255);
margin:10px 0px;
padding:10px;
}
p {
display:table-cell;
height:100%;
vertical-align:middle;
background:white;
}
img {
display:table-cell;
width:100%;
height:auto;
}
Yet another update using media queries
You could obviously use whatever breakpoints you want. I use 480px, as this is just for example purposes. Try resizing the window. jsFiddle example
CSS
#media only screen and (min-width: 480px) {
.element {
width:100%;
display:table;
background:rgb(134, 226, 255);
margin:10px 0px;
padding:10px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
p {
display:table-cell;
height:100%;
vertical-align:middle;
background:white;
}
img {
display:table-cell;
width:100%;
height:auto;
}
}
#media only screen and (max-width: 479px) {
.element {
width:100%;
background:rgb(134, 226, 255);
margin:10px 0px;
padding:10px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
p {
background:white;
}
img {
width:50%;
margin:0px auto;
display:block;
height:auto;
}
}