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
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.
My HTML website currently has a large empty space on the right side on mobile. The website is pumpkinchugger.github.io/rona20.live how can I get rid of this empty space? I currently have this in my CSS file, and I think it is causing this problem?
#media all and (max-width:991px){
.row{
flex-direction:column;
}
.container--wrap{
width: 98vw!important;
}
}
Is the max width the problem?
There is an overflow happens on the tradingView widget which set a fixed width of 500px. If you want a more proper fix for The widget is not adapting to different screen sizes. What should I do?, please refer to Market Overview Widget FAQ.
For now, I recommend fixing the issue with the following CSS code by setting the maximum width of the widget chart to 100%.
#media screen and (max-width: 576px) {
div.tradingview-widget-container__widget,
div.tradingview-widget-container__widget > div:first-child,
div.tradingview-widget-container__widget > div:first-child > iframe {
max-width: 100%;
}
}
I don't think max-width is the problem here. Upon inspecting the page, i removed the mentioned CSS, it did not change much and also, the spacing wasn't removed. When the width was set to 145% from 100%, it semeed to fit the page correctly
I am working on a design. The design is located at the link
http://jodbaki.com/apply-now.
In it desktop version is working fine but when. I see it in mobile then the form is going out of the image from right side. How can I adjust it ???.
This is because of your input,textarea and select. Try adding CSS media query once the width is smaller than 400px, shrink all your fields from 150px to 100px.
#media screen and (max-width: 400px) {
input,textarea,select {
width: 100px !important;
}
}
Your
<tbody style="float:right; background:white; margin:12px; width:285px;">
should be a class instead. If showing on mobile, the element doesn't change at all. If you have it as a class (with any name, maybe .applyform), then you can change the CSS for both your desktop version and the mobile version.
The desktop version, you can copy the tbody styles above and make it a class. For the mobile version, I suggest just changing the float:
.applyform { float:none; margin:0; }
Without float, your form will be 100% width.
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'm testing out my CSS at http://flexibletheme.tumblr.com/ and trying to make the website responsive to a small screen size.
Only problem is, I can't get the padding to work on aside element. To reproduce the problem resize your browser window till the sidebar stops floating to the right (this will appear at the bottom, once the screen size is below width of 600px.
All the CSS is inline for now, to view the css. Part relevant to the resizing starts at:
#media screen and (max-width: 600px) {
Edit: This image shows the padding in purple (via Firebug) not displaying properly:
What about the padding isn’t working? Chrome’s web inspector seems to confirm that the padding is there as declared.
I do notice that your <aside> element ends up positioned outside the left edge of your layout, but that’s because it’s floated right and has width: 100%; assigned to it.
from reading your code in Chrome's Inspector, I can see that the following rule is applied when you minimize the screen
#media screen and (max-width: 600px) {
#content {
width: 100%;
}
aside, #title, #menu, .photo img, .asker {
width: 100%;
}
}
This is why you are having the problem. Find your media query in your CSS and sort it out there. :)