I'm trying to add mobile view for this page. I want article and div.sidebar.col-md-4 to be on left on mobile view (sidebar above article). Here's link to the page:https://ewelinawoloszyn.github.io/Press/#mm-0
Here's my code
#media (min-width: 992px){
div.sidebar.col-md-4 {
float: right !important;
width: 162px !important;
}
}
#media (min-width: 1200px){
div.sidebar.col-md-4 {
float: right !important;
width: 162px !important;
}
article{width:50% !important;
float:left !important;}
}
div.profile p{
text-align: justify;
}
div.profile p a{
float:right;
}
div.profile ul{
list-style: none;
padding-left: 0px;
}
h3.name{
margin-bottom: 30px !important;
}
article{
width: 50% !important;
float:left !important;}
#media (min-width: 992px)
.col-md-4 {
width: 33.3333%;
}
div.sidebar.col-md-4{
float:right;
width:162px;
}
div.profile img{
margin-bottom:20px;
}
img.arch{
width:120px !important;
height:100px !important;
margin-top: 18px !important;
float: left !important;
margin-right: 9px !important;
}
div#disqus_thread{
float:left;
width: 523px;
}
What happens when I add media query for 768px the article appears below left side menu which I don't want. How to add mobile view without resetting 1200px view?
Any advice much appreciated,
Kind regards
Neko
div.sidebar.col-md-4{
float:right;
width:162px;
}
Move this inside #media (min-width:768px), and just define another style for width <= 768px
Related
I'm trying to make my subscribe form responsive and inline with the contact form above it. This is what it looks currently with the laptop view. I was able to line it up accurately with the laptop, tablet, and mobile views. (First Screenshot)
But then I realized that the subscribe form is still longer on the desktop view. For some reason, the of 980px is too wide on the desktop view even though its the perfect fit on the laptop view which is a smaller screens size. (Second screenshot)
This has made adjusting the media query a little difficult. Can anyone make any recommendations in this situation?
<style>
.mc4wp-form {
margin: 0 auto; !important;
max-width: 990px; !important;
text-align: center;
}
/*Media Queries below */
/*FOR DESKTOP */
#media screen and (max-width: 1400px) {
.mc4wp-form {
margin: 0 auto;
text-align: center;
width: 85%; !important;
margin-top: 0;
}
/*FOR LAPTOP */
#media screen and (max-width: 1295px) {
.mc4wp-form {
margin: 0 auto;
text-align: center;
width: 30%; !important;
margin-top: 0;
}
/*FOR TABLET AND MOBILE */
#media screen and (max-width: 767px) {
.mc4wp-form {
margin: 0 auto;
text-align: center;
width: 100%; !important;
margin-top: 0;
}
</style>
.mc4wp-form {
margin: 0 auto; !important;
max-width: 990px; !important;
text-align: center;
}
Looks like you have a syntax issue. There shouldn't be semi-colons after "auto" and "990px". You'll see the Chrome inspector throw a syntax warning in the console.
Revised:
.mc4wp-form {
margin: 0 auto !important;
max-width: 990px !important;
text-align: center;
}
I'm fairly new to the world of scripts and coding, so I do not know the best terms to use.
I am trying to make a somewhat simple website, and I want my header background to have padding-bottom 120px at min-width 600px, and 0 at 1050. However, the padding-bottom only updates when changed in the properties for header.
Here is my code:
header {
border-radius: 5px;
display: block;
width: auto;
min-height: 200px;
background: #E44;
padding-top: 40px;
padding-left: 38px;
padding-right: 38px;
padding-bottom: 136px;
}
#media screen and (min-width: 600px) {
.header {
padding-bottom:120px
}
}
#media screen and (min-width: 1050px) {
.header {
padding-bottom: 0px;
}
}
The padding-bottom stays at 136px no matter the min-width of the window.
Make sure that you know the difference the dot does. .header is selection the header class. While header selects the element. Your code works fine, as you can see here, I'm using the media queries to change the background color instead of padding, just to make the point clear.
Fiddle example
header {
border-radius: 5px;
display: block;
width: auto;
min-height: 200px;
background: #E44;
padding-top: 40px;
padding-left: 38px;
padding-right: 38px;
padding-bottom: 136px;
}
#media screen and (min-width: 600px) {
.header {
background-color: blue;
}
}
#media screen and (min-width: 1050px) {
.header {
background-color: green;
}
}
<header class="header">
</header>
There is a small typo here. You have an additional dot(.) which will mean a class selector as against the other style which is on element selector.
#media screen and (min-width: 600px) {
header {
padding-bottom:120px
}
}
#media screen and (min-width: 1050px) {
header {
padding-bottom: 0px;
}
}
PS: I'm very new to CSS and I'm trying my head around to work on a
mobile responsive UI, so please spare me if anything silly!
I have two devices with their widths and widths set as 360X640 and 375X667. I'm trying to write the css for these using #media but unable to make it work. The breakpoints which I set seems to be not working properly. Below is my code
#media(max-width: 360px){
.un-progress{
height: 10px !important;
margin-top: -0.325em;
margin-left: -2.75em;
margin-right: 1.5em;
}
.finished_time{
margin-left: 6.25em;
margin-top: -0.8em
}
.left_time{
margin-left: 22.0em;
margin-top: -2.5em;
}
}
#media (min-width: 361px) and (max-width: 375px){
.un-progress{
height: 10px !important;
margin-top: -0.325em;
margin-left: -2.75em;
margin-right: 1.5em;
}
.finished_time{
margin-left: 6.25em;
margin-top: -0.8em
}
.left_time{
margin-left: 22.0em;
margin-top: -2.5em;
}
}
}
Try using below css.
media only screen
and (max-device-width: 360px){
.un-progress{
height: 10px !important;
margin-top: -0.325em;
margin-left: -2.75em;
margin-right: 1.5em;
}
.finished_time{
margin-left: 6.25em;
margin-top: -0.8em
}
.left_time{
margin-left: 22.0em;
margin-top: -2.5em;
}
}
#media only screen
and (min-device-width: 361px)
and (max-device-width: 375px){
.un-progress{
height: 10px !important;
margin-top: -0.325em;
margin-left: -2.75em;
margin-right: 1.5em;
}
.finished_time{
margin-left: 6.25em;
margin-top: -0.8em
}
.left_time{
margin-left: 22.0em;
margin-top: -2.5em;
}
}
}
you ca use "all" for this subject.
#media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
.un-progress{
height: 10px !important;
margin-top: -0.325em;
margin-left: -2.75em;
margin-right: 1.5em;
}
.finished_time{
margin-left: 6.25em;
margin-top: -0.8em
}
.left_time{
margin-left: 22.0em;
margin-top: -2.5em;
}
}
There are a couple of things you should know beforehand when developing responsive. DON'T have a media query for every device. You'll end up
Having a media query for each device.
The maintainability of your code will be so difficult, especially when scaling
End up with large CSS files which will be bad for page performance.
The best way for a responsive CSS would be to follow the pattern of designing for mobile first and gradually making changes as the media queries get larger. eg
.un-progress {
height: 10px !important;
margin-top: -0.325em;
margin-left: -2.75em;
margin-right: 1.5em;
}
.finished_time {
margin-left: 6.25em;
margin-top: -0.8em
}
.left_time {
margin-left: 22.0em;
margin-top: -2.5em;
}
#media (min-width: 480px) {
.un-progress{
// changes here
}
.finished_time{
// changes here
}
.left_time{
// changes here
}
}
}
#media (min-width: 768px) {
.un-progress{
// changes here
}
.finished_time{
// changes here
}
.left_time{
// changes here
}
}
}
#media (min-width: 1024px) {
.un-progress{
// changes here
}
.finished_time{
// changes here
}
.left_time{
// changes here
}
}
}
(change the media query min-widths as approriate) This would give you a much cleaner and lightweight CSS
I am trying to set 2 different width to #home-content-wrap. What I eventually want is to be able to set to home-content-wrap div 80% width if the screen size is smaller than 768px!
It is like:
1156 width:80%
<1156 width:100%
<768 width: 80%
Couple of notes:
But <768 width:80% doesn't wok!
If I remove >1156 condition then <768 works!
If you look the code carefully you ll see that <768 condition changes text color but not width...or not bg color too..
Here is my page/div style:
*{margin:0;padding:0;text-align:center;}
#wrap{width:100%;height:100%;}
#home-content-wrap{width:80%; max-width:1600px; height:auto; margin:50px auto;
border:1px solid blue;}
/**Responsive Columns**/
.home_lay_1_of_2 {
width: 49.5%;
margin-left:0.50%; background:lightblue;
}
.home_lay_1_of_3 {
width: 49.5%; background:grey;
}
here is breaking points:
/****breakpoint 1**/
#media only screen and (max-width: 768px) {
#home-content-wrap{width:80%; max-width:1600px; height:auto; margin:50px auto; color:
yellow; border:1px solid yellow;}
.home-txt{float:left; width:100%; height:500px; }
.home_lay_1_of_2 {
width: 100%;
margin-left:0;
}
.home_lay_1_of_3 {
width: 100%;
}
}
/***Breakpoint 2***/
#media only screen and (max-width: 1156px) {
#home-content-wrap{width:100%; max-width:1600px; height:auto; margin:50px auto;
border:1px solid black;}
}
here is my responsive settings:
.section {
clear: both;
padding: 0;
margin: 0;
}
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.col {
display: block;
float:left;
}
Here is the fiddle http://jsfiddle.net/GQgNx/
What's wrong here?
Change the second breakpoint media query to:
#media only screen and (min-width: 768px) and (max-width: 1156px) {
#home-content-wrap {
border: 1px solid black;
height: auto;
margin: 50px auto;
max-width: 1600px;
width: 100%;
}
}
Example: http://jsfiddle.net/GQgNx/2/
I have updated your fiddle with some cleaner code. It's just an issue of the way your media queries were setup.
Your outline should be something like this:
/** narrow code default **/
#media only screen and (min-width:768px) {
}
#media only screen and (min-width:768px) and (max-width:1156px) {
}
#media only screen and (min-width:1156px) {
}
Updated fiddle http://jsfiddle.net/GQgNx/5/
I'm using these media queries in CSS to make my footer responsive.
I want to make the 3 columns (#footer-left, #footer-middle, #footer-right) automatically move under each other when the screen is made smaller.
what would be the best way of doing this? I have a fiddle here: jsfiddle
/* for 980px or less */
#media screen and (max-width: 980px) {
#footer-left {
width: 41%;
padding: 1% 4%;
}
#footer-middle {
width: 41%;
padding: 1% 4%;
margin: 0px 0px 5px 5px;
border-right:none;
}
#footer-right {
padding: 1% 4%;
}
#footer-bottom {
display:none;
}
}
/* for 800px or less */
#media screen and (max-width: 780px) {
#footer-left {
border-right:none;
}
#footer-middle {
margin-left: 0px;
border-right:none;
}
}
/* for 700px or less */
#media screen and (max-width: 700px) {
#footer-left {
border-right:none;
}
#footer-middle {
margin-left: 0px;
border-right:none;
}
}
/* for 480px or less */
#media screen and (max-width: 480px) {
#footer-right {
display: none;
}
}
Just make your #footer-left, #footer-middle, and #footer-right divs all be width:100% when you want them to stack, with float:none on each of them. Your width may need to be less than 100% if you keep padding on any of the divs (in your case, width would be 92%, since you've got it set up for 4% padding on left and right of each div).