I made an email template on Unlayer and exported the HTML, I have 6 columns on desktop but I am trying to change them to 3 columns with 2 rows stacked on mobile.
Desktop
I have taken out display block on 3 of the columns and they look ok on mobile, but I cant figure out how to get the other 3 columns to stack below the first 3.
without display block on first 3 columns
This is the code I believe i have to change:
#media (max-width: 750px){
.u-row-container{
max-width:100% !important;
padding-left:0px !important;
padding-right:0px !important;
}
#media (max-width: 750px){
.u-row .u-col{
min-width:320px !important;
max-width:100% !important;
display:block !important;
}
I set up a codepen thing here
Related
So I was working on a static website that uses only HTML and CSS. I made the website in desktop view so when screen size is more than 1220px the website will look exactly as I want it to. For selecting services I have a picture as a background and some text inside it. The dimension of picture is 420x469 px. I have a total of 4 pictures and I put them in pairs of 2. So like this (Service 1) (Service 2). I have padding of 7.8% on both left and right side and 8% padding on bottom. Currently if someone access my website from mobile, then service 1 shows with 7.8% left side padding and half cut picture. Then service 2 below it just like Service 1.
What I want is that when someone uses website from phone, they see the picture completely and no padding. and if there is enough space, then some padding pls tell how i can do that
Have a look at these Docs here:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Then you can use CSS like this
.my-class {
/* Mobile - Desktop */
padding: 10px;
}
#media only screen and (min-width: 600px) {
/* Tablet - Desktop */
/* It will overwrite the other less specific classes padding */
.my-class {
padding: 30px;
}
}
<div class="my-class">
<h1>My Content</h1>
</div>
Bonus tip: Don't work with max-width in general, but with min-width. That means you will be working mobile first.
in css add this line it will work perfectly in any screen size
.service1{
width: 100%;
height: auto;
}
Define a #media query specifically for 'phones' like this :
#media (max-width: 640px) { /*...*/ }
You may want to remove the padding/margin for any smaller screen sizes. Try like this:
#media (max-width: 978px) {
.container {
padding:0;
margin:0;
}
}
Otherwise, Try using bootstrap it works very well in Adjusting margin/padding with screen size.
I have a three-column website that is coded as a single column (responsive) up to 767 px. I want to set a 3 column view beginning for devices from (including) 768px.
I already have this working partially, but I need a smaller font size for devices beginning from 768 px.
Currently I have the following HTML code:
#media screen and (max-width: 767px) {
.wrap {
display: block;
}
.tc {
display: block;
width: auto;
border: none;
}
And other HTML code within this code.
The above makes a single column display for devices up to 767px.
I want to know what to write for viewport sizes above 767px which then starts with the Apple iPad, which is 768px default portrait size, and then higher px? I already have following code for max-width declared to up to 1240px.
What is the HTML/CSS code for devices 768px and above?
You can use a media query with min-width instead like this:
#media screen and (min-width: 768px) {
// your css here
}
I'm in a tizzy here. I got a mailchimp layout which I exported from MailChimp. Right now the layout is 3 column, but in Mobile it's 1 column.
Here is the codepen: goo.gl/Fj8Ct7
Can someone help me to get it to be 2 column layout in mobile view?
I'm in a real pickle here.
Best,
Mike
Try changing your .columnWrapper in your css where max-width: 480px from width 100% to 50%
#media only screen and (max-width: 480px){
.columnWrapper{
max-width:50% !important;
width:50% !important;
}
FINAL RESULT
We are developing a new UI for one our products and for a number of reasons have the need to toggle between two <div> tags depending on whether the device be mobile or desktop. Each <div> will contain appropriate content for either mobile or desktop, but because we only have a single HTML page, we need the ability to turn on one <div> while turning off the other one.
This question is something of a follow up to this SO question which is very similar to what I am asking here. To recap the solution found there, there are two <div>s:
<div class="visible-phone">
content for phone
</div>
<div class="visible-desktop">
content for desktop
</div>
and there are two CSS rules which employ either the maximum or minimum screen resolution:
.visible-phone{
#media (max-width: 480px) { more css }
}
.visible-desktop{
#media (min-width: 768px) { more css }
}
To get to the point, consider a device with a minimum width of 700px and a maximum width of 900px. This would fall through the cracks of the above CSS logic and would result in neither <div> being visible. As another example, a device ranging from 500px to 750px would also not be covered.
Can anyone suggest a full-proof approach to avoid the weakness in the referenced answer? CSS based solutions would be preferred here.
What you could use is display none within the media query. Use the different classes assigned to each div such as mobile and desktop then in the media query for desktop set .visiblephone{display:none;} and query for mobile set .visible-desktop{display:none;}
This will ensure that within your specified media query one div will always be hidden, then you just have to get your screen size values =)
if i understand you correctly you are trying to do:
CSS
#media screen and (max-width: 480px) {
.visible-phone{
display: block !important;
}
.visible-desktop{
display: none !important;
}
}
#media screen and (min-width: 480px) {
.visible-phone{
display: none !important;
}
.visible-desktop{
display: block !important;
}
}
Use Media Queries
/* If the screen size is 600px wide or less, hide the element */
#media only screen and (max-width: 600px) {
div.example {
display: none;
}
}
I am using Bootstrap's responsive style sheet and I have 4 squares in divs spanning 12 columns, so |3|3|3|3|
and when I view this in a mobile browser I see:
|12|
|12|
|12|
|12|
But I want to see:
|6|6|
|6|6|
In other words, I dont want the items to appear one after the other, more two on one row and two on the next.
Is this possible?
By default bootstrap's media query does the following:
#media (max-width: 767px)
[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {
float: none;
display: block;
width: 100%;
}
In order to achieve the layout you need, set another media query something similar to :
#media (max-width: 767px)
[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {
float: left;
width: 50%;
}
Tweek the css as you see fit.
If you're only concerned with .span3 DIVs a media query like this will work..
#media (min-width: 400px) and (max-width: 767px) {
.row-fluid .span3 {
width:44%;
float:left;
}
.row-fluid .span3:nth-child(3) {
margin-left:0;
}
}
This would still allow the cols to switch to 100% width (stacked) at less that 400 pixels for tiny screens. Demo: http://bootply.com/69753
Another option is to use the responsive utility classes as shown in this demo:http://bootply.com/64868 ,but this requires separate markup for each responsive "view".