I'm in the process of converting my layout to a responsive design. I've looked at some tutorials and made some adjustments. However, when I load the page on a cell phone, iPad, or even make my window smaller, the content runs on top of each other. I was under the impression that using % instead of pixels would fix this. Am I wrong? The link is below.
http://tinyurl.com/ab2fmwv
article {
width: 80%;
min-height: 100%;
margin-left: auto;
margin-right: auto;
border: solid;
position: relative;
overflow: hidden;
clear: both;
}
#two_column_left {
width: 74%;
float: left;
background-color: #FFFFFF;
}
#two_column_right {
width: 25%;
float: right;
}
.three-col-row {
width: 100%;
float: left;
padding-top: 2%;
}
.col-1 {
width: 26%;
float: left;
padding-left: 5%;
padding-bottom: 2%;
}
.col-2 {
width: 26%;
float: left;
padding-left: 5%;
padding-bottom: 2%;
}
.col-3 {
width: 26%;
float: left;
padding-left: 5%;
padding-bottom: 2%;
}
.pic-3-col {
width: 175px;
height: 100px;
}
p.title-3-col {
color: #222020;
font-size: 1.3em;
clear: both;
}
p.description-3-col {
width: 190px;
}
although the columns size perfectly, it's contents do not. for example
.pic-3-col {
width: 175px;
height: 100px;
}
if you want a responsive fluid layout, there should not be values like this in the CSS.
you are using width in pixels for following classes
p.description-2-col style.css line no 439 solu. add it 'max-width 100%'
p.description-3-col style.css line no 406 solu. add it 'max-width 100%'
.pic-3-col style.css line no 197 solu. add it 'max-width 100%' </br>
wrap images of same columns in .pic-3-col as the first column is done
and also according to resolution keep chanding their wirdth in percentage using media queries
Related
I have some html content with following structure:
<div class="message-container">
<p class="message-value">someVal</p>
<div class="message-attribute">someUsername</div>
<div class="message-attribute">11-09-2017 12:30</div>
</div>
So, I want to scale my message-container up when it gets long values in message.value and scale it down as far as possible to min-width in the other way.
I also wan't to specify max-width for this props.
I've done this:
.message-container {
resize: both;
margin: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
color: #ffffff;
border-radius: 20px;
min-width: 100px;
max-width: 400px;
width: auto;
height: auto;
background-color: #80CBC4;
}
.message-value {
resize: both;
float: left;
max-width: 380px;
word-wrap: break-word;
height: auto;
}
.message-attribute {
padding-left: 50px;
width: 150px;
display: block;
color: #607D8B;
}
and message-username and message-datetime has fixed width.
Finally, I'm alsways getting max-width in my message-container even when it has free space to cut it down
https://jsfiddle.net/Lwrpegqe/
As you can see in jsfiddle width is too long with following content it could be shorter
Main purpose to resize block automatically
See the solution.
.message-container {
resize: both;
margin: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
color: #ffffff;
border-radius: 20px;
min-width: 100px;
max-width: 400px;
width: auto;
height: auto;
background-color: #80CBC4;
}
.message-value {
resize: both;
float: left;
max-width: 380px;
word-wrap: break-word;
height: auto;
display: inline;
}
.message-attribute {
padding-left: 50px;
width: 150px;
display: inline;
color: #607D8B;
}
https://jsfiddle.net/Lwrpegqe/2/
Add display: inline-block; to your .message-container
Inline elements only take up the space of the content. A div is always a block element unless specified.
Give width and height in percentage (%).
Hope it will work for you.
.your-class {
width:100%;
height:100%;
}
just use w-100 in bootstrap 4 to fit to 100% width of container element
folks, I am learning the basics of web development. I have used two fieldsets in the page as CSS id
#lfieldset
{
width: 1019px;
height: 500px;
background: #ffffff;
border-radius: 8px;
border: none;
float: left;
}
#rfieldset
{
width: 300px;
height: 200px;
background: #ffffff;
border-radius: 8px;
border: none;
float: right;
}
this is how it looks
Screenshot1
and the meta tag
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
for layout, but the second fieldset comes to the bottom if I reduce the window, see
Screenshot2
how can I solve this?
You should use % instead of px to manage the size of your fieldsets.
#lfieldset
{
width: 80%;
height: 500px;
background: #ffffff;
border-radius: 8px;
border: none;
float: left;
}
#rfieldset
{
width: 20%;
height: 200px;
background: #ffffff;
border-radius: 8px;
border: none;
float: right;
}
Another alternative if you want to keep the size of on of those, use the calc function to set the width:
#lfieldset
{
width: calc(100% - 300px);
height: 500px;
background: #ffffff;
border-radius: 8px;
border: none;
float: left;
}
#rfieldset
{
width: 300px;
height: 200px;
background: #ffffff;
border-radius: 8px;
border: none;
float: right;
}
Use % or ems for responsive design. Usage of pixels is not a good practice and does not give you a responsive design
Instead of fiddling around with floats ,you may consider using display:flex for the same
check this snippet
#lfieldset {
width: 90%;
height: 50%;
background: #ffffff;
border-radius: 8px;
border: none;
}
#rfieldset {
width: 10%;
height: 20%;
background: #ffffff;
border-radius: 8px;
border: none;
}
.wrapper {
display: flex;
justify-content: space-between;
border: 1px solid;
}
<div class="wrapper">
<feildset id="lfieldset">
this is left
</feildset>
<feildset id="rfieldset">
this is right
</feildset>
</div>
Hope it helps
There are three approaches you can take in this situation.
Responsive approach 1: Here you elements will use width in percentage or em or rem:
#lfieldset
{
width: 80%;
height: 500px;
float: left;
}
#rfieldset
{
width: 20%;
height: 200px;
float: left;
}
Responsive approach 2: Whenever browser width decreases, allow elements to stack one below another. You are currently doing something similar. Better version would be:
#lfieldset
{
width: 80%;
height: 500px;
float: left;
}
#rfieldset
{
width: 20%;
height: 200px;
float: left;
}
#media only screen and (max-width: 768px) {
#lfieldset
{
width: 100%;
float: none;
}
#rfieldset
{
width: 20%;
float: none;
}
}
Fixed approach: Let there be horizontal scrollbar. In that case, you will have to create a wrapper element:
<div class="wrapper">
<fieldset id="lfieldset"></fieldset>
<fieldset id="rfieldset"></fieldset>
</div>
/* CSS */
#lfieldset
{
width: 1019px;
height: 500px;
float: left;
}
#rfieldset
{
width: 300px;
height: 200px;
float: left;
}
.wrapper {
width: 1319px; /* Sum of 1019px + 300px */
}
In this approach, when you reduce the size of browser, you will get horizontal scroll bar.
Please notice: I am not using float: right even for rfieldset. Using left float will ensure that when right is pushed downwards, then you still get proper left alignment.
As a beginner, you might wonder the syntax I used in responsive approach 2. It is media queries from CSS3. Choose your solution depending on your requirements (responsive layout vs. fixed layout using horizontal scrollbar).
To further understand different layout techniques in CSS, go through:
http://www.slideshare.net/HarshalPatil4/css-layout-techniques
I'm new to CSS and I am trying to scaled 2 pictures, which are in the same class, to the same perecentage: height: x% and width: y%, however they are not coming out the same size. If it matters, I did not set the size in my HTML file either. Here is what I got:
.BlogBoxes {
font-size: 20px;
text-align: justify;
border-style: solid;
border-width: 3px;
width: 70%;
height: 30%;
margin: 20px 1000px 20px 10px;
padding: 10px 10px 50px 30px;
background-color: #FFCEB7;
}
.BlogBoxes img {
float: right;
width: 25%;
height: 80%;
padding-left: 10px;
padding-top: 70px;
}
Here is a screenshot, if it helps
You need to apply the width you are after to a parent element of the image, and then set the image to have a max-width of 100%.
So in your case you want the image to take up 25% of '.BlogBoxes', so we'll create a new div inside that '.img-container', and then place the img inside of that.
.BlogBoxes div.img-container {
float: right;
width: 25%;
/*height: 80%; // forget height this is not necessary */
padding-left: 10px;
padding-top: 70px;
}
.BlogBoxes div.img-container img {
max-width: 100%;
height: auto;
display: block;
}
I am busy with my portfolio site and I am going to make it responsive.
The most things are responsive but i'm struggling with the contact page.
Code:
.footerContact .informatie
{
float: left;
margin-left: 20%;
margin-top: 10%;
color: white;
width: 250px;
}
.footerContact .form
{
float: right;
margin-right: 20%;
margin-top: 10%;
color: white;
width: 300px;
}
Now i am using a media query to put them under each other when de screen size is smaller as 1115px
Example can be found here
How can i do this?
#media only screen and (max-width: 1115px)
{
.footerContact .informatie
{
float: none;
margin-left: 20%;
margin-top: 10%;
color: white;
width: 250px;
}
.footerContact .form
{
float: none;
margin-left: 20%;
margin-top: 100px;
color: white;
width: 250px;
}
}
Your form is working properly in responsive mode.
You just have to set margin: auto to center align divs.
Fiddle: http://jsfiddle.net/L2mvewLo/1/
Target all devices
#media all and (max-width: 1115px) {
Then either set both to width: 100%; and float: left;
Or float: none; and margin: auto; (to center them).
I am trying to convert an existing site into responsive however there is one thing I'm struggling with here:
http://www.brandonsuffolk.com
When you resize the window I want the right column to squash the left one, however at the moment it drops underneath (however once the screen hits the other left div it will change).
When I do it with single divs it works, however as soon as I add a new div inside it, it won't work properly.
Here is the relevant CSS:
.MainOuter {
float: left;
width: 100%;
}
.MainWrapper {
max-width: 980px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
}
.ColumnRight {
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
float: right;
width: 290px;
padding: 0px;;
}
.ColumnLeft {
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
float: left;
width: auto;
max-width: 670px;
padding: 0px;
}
I'm afraid you're fighting the normal process of responsiveness. responsiveness is supposed to do just what it's doing. If you don't want it to drop under, find the #media for this element and change it to:
#media (min-width:0px) {
width:50%;
}
This may help
Assuming I understood, and you want the right-side column to maintain the fixed width, you'll need to use position:absolute with a left and right value, and width set to auto. This gives you a fixed side and a side that takes the rest of the screen.
Wanting it to only apply after they touch though, is where you'll have to use a media query. Set the media query to apply only when the screen is lower than 1000px, which will tell the left column to change there and become flexible.
EDIT
Try adding this CSS to your site's CSS file, at the end. Additionally I've updated the Fiddle to show how that it works. You might have to tweak the numbers a little, but it'll do what you need.
Example Fiddle
#media screen and (max-width: 1000px) {
.ColumnLeft {
position: absolute;
left: 20px;
right: 320px;
width:auto;
}
}
May this is what you mean with "squash" ?
http://jsfiddle.net/7QVVz/
CSS
.wrap {
display: table;
width: 100%;
}
.left {
display: table-cell;
border: 1px solid green;
width: 350px;
max-width: 350px;
}
.right {
display: table-cell;
border: 1px solid red;
}
.right > .text {
width: 200px;
float: right;
border: 1px solid yellow;
}
HTML
<div class="wrap">
<div class="left">LEFT</div>
<div class="right">
<div class="text">RIGHT TEXT</div>
</div>
</div>