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
Related
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
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.
My current website layout: Screenshot 1
I used a div with a wrap id to center the site:
#wrap {
width: 70%;
margin: 0 auto;
}
but now it obviously also makes it 70% width on mobile which looks bad: SC2
I did try using media queries, the one with max-device-width specified by itself and also the ones that are on the bootstrap website under the CSS section, everytime I used any of those I removed the original #wrap css code, but nothing at all worked, my website would just go to being 100% on all devices and even if I made it 70% on mobile (just as a test) it was still the same everywhere, like there was no css code for the wrap id at all.
Sorry if it's a dumb question, i'm just lost and really want to make my site 100% at a certain (tablet-mobile) breakpoint.
Try this:-
#media (min-width: 768px) {
.mymenu {
width: 20%;
}
}
I have created a website that is both for desktop and mobile. But on mobile, you can not see the whole background picture (missing some of the cup) because of the nav. How do I get the whole picture. When you have slide down, you can se the whole background picture and the cup. Can some one help me with that, please? :)
My website: http://odsgaardklausen.dk/DBS/DBS.php
Create a media query for the body to specify changing the background-position when in mobile view.
#media (max-width: 767px) {
body {
(...)
background-position: center 50px;
}
}
The second value sets the vertical alignment of the targeted background, so in this case, you're pushing the image down 50px from the top of the body.
I should also note the media query is set to 767px to match Bootstrap's media query for the navbar.
As #Drew Kennedy says in the comment, but just wrap it in media query, otherwise you will have a white space on desktop.
#media only screen (max-width: 480px){
body{
background-position: center 50px;
}
}
I have an responsive html email design which I did using this tutorial from campaign monitor but I have one problem my image is not fitting to the device when it is viewed on mobile,after designing many templates and reading a lot on email designing blogs I learned that gmail by default remove css or styling in the head part and allows only inline html .So now in my case I want my image to fit the device width but its not fitting when I am sending in mail but I can see on browser because of below coded media query .
#media screen and (max-width: 480px) and (min-width:300px) {
.col185{max-width:100% !important;}
.col180{max-width: 100% !important;}
.col180 img{
height: 155px;
}
}
. So what is there any way where in i can see image stretched on my mobile device also. This is my js fiddle link .
Let's say that the name of the div that contains the image is pic You should do this
CSS
.pic img{
width:100%;
height:100%;
}
This will allow the image to re-size itself according to the parent div. If you still don't understand this method let me know and i'll expand on it
You need to change to width or min-width, and right now you have max-width. See below:
#media screen and (max-width: 480px) and (min-width:300px) {
.col185{min-width:100% !important;}
.col180{min-width: 100% !important;}
.col180 img{
height: auto;
}
}
Otherwise, you're just saying to use height: 155px and width will adjust to that height.
Also, remember that not all mail clients render your CSS the same. Many of them, specially Outlook, won't accept many of your CSS rules. Just to be sure, you can run your code through http://premailer.dialect.ca/ (free) or similar so you can pre-check what will happen with your mail