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).
Related
I have a HTML page where there are: header, nav, article and aside.
I want the header on the top as a bar and the nav, article and aside as 3 cols. When i wrote the css I put margins and widths of nav, article and aside which sum is 100% but aside on full screen is as a third col but when i resize the screen goes to new line. I read that the problem are the whitespaces and i tried to remove them but it doesn't work. I put body to flex and it worked but it did a single row with 4 cols (header, nav, article and aside). At this point i tried with a div as a container of nav, article and aside and put it to display:flex but it doesn't work. I don't what to do anymore.
Here the code HTML & CSS
nav {
margin-left: 0.5%;
margin-right: 0.5%;
padding: 0;
width: 20%;
background-color: #f1f1f1;
float: left;
overflow: auto;
border-radius: 15px;
}
article {
margin-left: 0.5%;
margin-right: 0.5%;
padding: 15px;
width: 52.5%;
background-color: #f1f1f1;
float: left;
overflow: auto;
border-radius: 5px;
}
aside {
margin-left: 0.5%;
margin-right: 0.5%;
padding: 15px;
width: 20%;
background-color: #f1f1f1;
float: right;
overflow: auto;
border-radius: 5px;
}
<nav>
<a class="active" href="index.html">Homepage</a>
</nav>
<article>
<h1>Hai bisogno di ripetizioni?</h1>
<h2>Controlla subito le disponibilità qui sotto:</h2>
<div id="listAvailable"></div>
</article>
<aside>
Filtra le disponibilià:<br>
Data<br>
<div class="filter" id="days"></div>
Materia<br>
<div class="filter" id="subjects"></div>
<button onclick="filterAvailable()">Filtra</button>
</aside>
EDIT: The answer below is the right solution, if it doesn't work immediately try to delete cache and history because it was the reason why it didn't worked when i tried before to make the post. Anyway i had to add height: 100%; in aside and nav to make them wrap their content, otherwise their height would match the height of the div.flex (that is quite annoying).
EDIT2: There were other css code that make the site responsive, with this solution it doesn't work. The full css code is:
body {
background-image: url(../img/bg.gif);
margin: 0;
padding: 0;
}
header {
margin-bottom: 15px;
padding: 20px 10px;
background-image: url(../img/header2.gif);
overflow: hidden;
}
nav {
margin-left: 0.5%;
margin-right: 0.5%;
padding: 0;
width: 20%;
background-color: #f1f1f1;
float: left;
overflow: auto;
border-radius: 15px;
height: 100%;
}
article {
margin-left: 0.5%;
margin-right: 0.5%;
padding: 15px;
width: 52.5%;
background-color: #f1f1f1;
float: left;
overflow: auto;
border-radius: 5px;
}
aside {
margin-left: 0.5%;
margin-right: 0.5%;
padding: 15px;
width: 20%;
background-color: #f1f1f1;
float: right;
overflow: auto;
border-radius: 5px;
height: 100%;
}
.flex{
display:flex;
}
header img.logo {
font-size: 25px;
font-weight: bold;
}
#formLogin {
float: right;
}
nav a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
text-align: center;
}
nav a.active {
background-color: #00bff0;
color: white;
}
nav a:hover:not(.active) {
background-color: #555;
color: white;
}
/* Add media queries for responsiveness*/
#media screen and (max-width: 700px) {
article {
margin-top: 20px;
min-width: 550px;
}
nav {
align-items: center;
width: 100%;
height: auto;
position: relative;
}
nav a{
text-align: center;
height: auto;
float: left;
}
}
#media screen and (max-width: 500px) {
header {
align-items: center;
}
#formLogin {
float: none;
}
}
#media screen and (max-width: 400px) {
nav a {
text-align: center;
float: none;
}
}
To make the css still responsive you have to add this CSS code in the largest #media (the smaller ones will inherit it):
.flex {
display: block;
}
I hope this edit can helps someone in the future
if this is not answer, please show what you want to with picture.
nav {
margin-left: 0.5%;
margin-right: 0.5%;
padding: 0;
width: 20%;
background-color: #f1f1f1;
float: left;
overflow: auto;
border-radius: 15px;
}
article {
margin-left: 0.5%;
margin-right: 0.5%;
padding: 15px;
width: 52.5%;
background-color: #f1f1f1;
float: left;
overflow: auto;
border-radius: 5px;
}
aside {
margin-left: 0.5%;
margin-right: 0.5%;
padding: 15px;
width: 20%;
background-color: #f1f1f1;
float: right;
overflow: auto;
border-radius: 5px;
}
.flex{
display:flex;
}
<div class="flex">
<nav>
<a class="active" href="index.html">Homepage</a>
</nav>
<article>
<h1>Hai bisogno di ripetizioni?</h1>
<h2>Controlla subito le disponibilità qui sotto:</h2>
<div id="listAvailable"></div>
</article>
<aside>
Filtra le disponibilià:<br>
Data<br>
<div class="filter" id="days"></div>
Materia<br>
<div class="filter" id="subjects"></div>
<button onclick="filterAvailable()">Filtra</button>
</aside>
</div>
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
Can any one tell why the <div> width is NOT adjusted to 48% as the screen size changes? Is it because I have used position: relative;?
CSS:
.wrap {
width: 24%;
background: white;
margin: 15px;
padding: 10px;
float: left;
display: inline-block;
overflow: hidden;
position: relative;
}
#media(max-width: 580px){
width: 48%;
}
Seems like you just forgot the .wrap and curly braces in the media query:
#media(max-width: 580px) {
.wrap {
width:48%;
}
}
Also see these examples about how to notate media queries.
Solution to your problem
#media(max-width: 580px){
.wrap{
width:48%;
}
}
https://jsfiddle.net/11opj4nq/
Hi remember about mobile first :) . Good practice is to override code in larger devices.
.wrap {
width: 48%;
background: white;
margin: 5px;
padding: 10px;
float: left;
display: block;
overflow: hidden;
position: relative;
}
#media screen and (min-width: 580px) {
.wrap {
width: 24%;
margin: 15px;
}
}
On this site Site link I have a contact info on the top right with tel: link for mobile devices. How can we hide the tel: link on desktops the best (easiest) way?
Now I have this:
CSS:
#header .contact-info1 { width: 253px; height: 50px; display: block; float: right; background: url(contact-info1.png) 0 0 no-repeat transparent; margin-right: 39px; margin- top: 110px; }
#header .contact-info2 { width: 292px; height: 51px; display: block; float: right; background: url(contact-info2.png) 0 0 no-repeat transparent; margin-right: 0px; margin- top: 30px; }
#media only screen and (max-device-width: 480px) {
#header .contact-info1-mobile { width: 253px; height: 50px; display: block; float: right; cursor: pointer; background: url(contact-info1.png) 0 0 no-repeat transparent; margin-right: 39px; margin-top: 110px; }
#header .contact-info2-mobile { width: 292px; height: 51px; display: block; float: right; cursor: pointer; background: url(contact-info2.png) 0 0 no-repeat transparent; margin-right: 0px; margin-top: 30px; }
HTML:
<a href="tel:+491796737741" class="contact-info1-mobile" ></a>
<div style="clear:right"></div>
<a href="mailto:info#rw-fliesen.com" class="contact-info2-mobile" ></a>
At the moment I'm hiding the link for desktops, but how can I hide the link for desktops and at the same time having the contact-images displayed for desktops?
you can also do that by $(window).resize using jquery
$(window).resize(function() {
var width = $(window).width();
if (width < 750) {
// Do Something
}
else {
//Do Something Else
}
});
another option by detecting browser as link mention on my comment using jQuery or javascript
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