i am trying to keep the original default width for mj-body on mobile view as well, because i calculate my image's width based on screen width and its width in percentage value so i need the screen width to be persistent, now here's the code that i use https://mjml.io/try-it-live/s743_l6g7
now as i see problem lies in here
mjml automatically adds fits columns to the screen which messes up my desired result on mobile, i want to override this and always have 600px screen width even on devices smaller than 480px screen size and have zoomed out view as it would have been normally
Related
I am trying to optimize my website for smaller screens like handys.
But when I try to test it for screens smaller then 400px the body isn't the full width of the screen anymore.
this is how it looks for a 360px widescreen.
It says the HTML width is 360px, but it isn't the full width of the screen.
I have a div that is normally set to take up 20% of the page's width, however, on a page where this 20% is not enough to display its content without overflowing, I would like it to take up the minimum amount of width necessary to fit the content. The content is not necessarily fixed-width, so I cannot simply use min-width with a hardcoded value in pixels.
I'd like to do this with pure CSS, if at all possible.
So, what I would suggest is defining a Breakpoint. So you have to figure out on which point your width is not enough, and use a media query to overwrite CSS rules to fit different situations.
So you could do something like this if your page breaks for smaller screen widths than 720px:
#media screen and (max-width: 720px) {
/* ... */
}
Then you can define a new width or min-width inside of this media query.
I'm having some issues with fluid images when using a max height. I'm trying to bound the image in a box that is at most 450x450 or any arbitrary box thats not in the same aspect ratio as the image. What's happening is that the width of the image is being restricted to 450px but the height is not and the image is overflowing the wrapper div.
my code is:
<div class="wrapper">
<div class="container">
<img src="http://i.imgur.com/iw4yOa0.jpg"/>
</div>
</div>
see http://jsfiddle.net/5fuZ5/ for full code and css.
I know I could achieve this by using jquery but I need a responsive solution that doesn't require javascript.
OK i've got a similar issue and could find nothing to help. My situation is that i have a single column of images that are fluid (fit their container 100% in width) works fine for landscape images but portrait are huge as its the width being fitted, therefore tall and skinny image (portrait) is having its width fit to container thus making it massively tall.
My solution was to think about the container, if in the instance of a portrait image i set the container to be 50% of the landscape container then when i fit the images width (when portrait) to a smaller container i get them proportional (ish).
So wat you want is 2 containers to use, one for portrait and landscape, the landscape one will be the maximum width you want so 450px. Now make your portrait container half a width so 225px (half of the width) if all your images are the same aspect ratio then they should all match nicely and give you a structured grid - or if single column the portrait images will be more or less as tall as the landscape images are wide.
If you want to see this working (for a short time) I'll leave this link up so you can see how i solved it. The example is an email (please don't moan about poor coding, its not finished) template I'm making, where i have a single column of images (its responsive) both portrait and landscape - use a class on the table that contains the portrait image (class=portrait) but this could easily be a div.
http://www.sink140.com/sf-test/single.html
My main point is to stop thinking about trying to control the height, just control the container, let the image fill it, and by adjusting the width of the container (making it smaller) you naturally reduce the height of the image.
Aspect ratio of the images in general will ensure you can predict the layout as you have a baseline of sorts - portrait images relate to the landscape ones.
Hope this helps or at least give you another idea.
I am designing a website using the CSS fluid layout (based on adaptive/responsive web design)
So I would not give anything as fixed value i.e. in px (only use %)
My question is ; While I do understand if I give the container a width of 100%, it would get calculated based on the browser window ( or viewport width) . But what about the font sizes like when we say 100% or 1 em for the body font, how will that be calculated ?
Also are the visible font-sizes going to be same on desktop as well as mobile devices ?
Relative font-size units are calculated from user default font-size, you have to use media queries if you want to adjust font-size from screen dimensions.
On mobile device text appears smaller because resolution is greater, be careful!
I want to have an image that has to cover the entire screen or at least one of the sides so that it keeps its aspect ratio.
How do I do that considering the various screen sizes and DPI?
FlexGlobals.topLevelApplication.screen
returns the screen rectangle, and
FlexGlobals.topLevelApplication.applicationDPI
returns the DPI of the application.
But in Flex you can simply set an s:Image control's width to 100% of the view, then it will cover your screen. (and dont set the height, Flex will figure it out for you)