I'm making an HTML email that has a mobile and desktop version. The way I'm accomplishing this is by making two separate tables, one with an id of #desktop and the other with one as #mobile. At a certain point with a media query (around 450px) I set display for #desktop to none, and it works. On my phone, only the mobile version shows up as expected; however, on desktop, when prompted with the "Display Images Below" from gmail, after clicking it, the mobile version of the email shows up below the desktop version (even though it's display is naturally set to none).
Now. I've tried a million ways to fix this. I've tweaked the media queries. I gave #mobile a margin to hide it, I changed all the images to background-images, but for some reason no matter what I do I can't get around this... has anyone had a similar experience where they found a solution?
I think i know whats happening here and since you havent given any code to go with i will take a stab in the dark. For mobile verison to hide completely, you need the images to be set at 1px x 1px or 0px x 0px.
You are controling the mobile version using CSS so each you can target each of the images and give it a width of 100% and height auto important.
Let me know if it works for you.
Related
Good day everybody! I am currently working on a web app, and I am using media-queries, in aims to support mobile and desktop.
I have tried to use max-width: 414px as my first break-point, to work on the current iPhones and other phones with smaller screen sizes. However, even after rereading various forum posts, responsive web design tutorials, and web documentations, to no luck, it wouldn't work the way I need it to.
See here that whenever I use max-width, even on screen sizes of 414px, or lower (I have tried), it really wouldn't work. The styles wouldn't apply.
Now, when I would use, min-width, it does work, however, I've read it's better RWD practice to use max-width for better functionality.
What are your suggestions? Thank you!
So I think your problem is that you are in zoom mode (like 2x or 3x). If you are in Safari responsive mode, please remember to go to use View > Actual Size , make sure it's not zoomed in in any way, as this will surely affect the media query used. Have a good day!
I'm having an issue with my site displaying the contents of an iframe properly (it's a dashboard from Metabase if anyone is familiar with that).
On my large monitor the dashboard shows fine, however on my 13-in laptop some of the numbers are obscured by an arrow. This is only the case in Chrome, as Firefox doesn't have the issue.
When I take the zoom down to 90% everything shows flawlessly on the 13-in resolution, however I don't want my users to have to manually zoom out just to make the page appear properly.
I've used all kinds of zoom, transform, and scale options to get this looking right but whenever I get it working on the small resolution it just breaks on the larger one. And the CSS code doesn't seem to be the same zoom as if you do it manually through Chrome, if that makes sense. It just doesn't work the same way.
I'm not sure what to do except maybe have the screen size auto adjust for a smaller resolution to 90% but I'm not sure how to do that or if it's even possible.
Any ideas for what I can do?
You can use different CSS code for different screen resolutions using #media tags.
You could also try the CSS zoom property on the html or body tag, but some people don't recommend it.
I'm testing a demo site as of right now. I've set it up and it looks fine if I were to resize the browser, as it seems like the media queries I've set up are working properly. I noticed that on iPhone 5/5S/5C there would be some significant added height above the logo, as well as below it. I thought what would work to fix this is to add a negative margin to even out this strange space. Without the negative margin it looks like this on an iPhone 5/5S/5C:
On iPhone 6, 6+ this looks fine, as it should be. Also, on iPad it has the same strange spacing in between the logo.
With the negative margin that I added, when I would check the the site in developer tools and take it to the width of an iPhone 5 (320px), all the elements would be squished towards the top of the screen due to the negative margin like this:
If you could look at my source code at the domain http://eugeneross.com/cw and tell me what I'm doing wrong I would greatly appreciate it, I've literally been pulling my hair out over this problem as to why it's not working on certain devices.
My other problem is that the video doesn't want to play now when the display is larger than a mobile screen. I must've messed something up trying to fiddle around with my problem above. If someone could tell me the problem there I would be ver grateful.
Let me know if you need anymore from my end to assist me with this problem.
Deleted everything in
#media screen and (max-width: 320px) {}
and it looks fine to me now.
This is a good site where you can check how your site looks on all devices and some don't load the background cover.
On my webpage, I use images that are 720px by 480px. If I look at them in Firefox or IE (latest version) however they look scaled up, they are considerably larger on the screen than their original version in Lightroom. If I look at the dimensions of the picture on the web though, it says that it is 720x480. If I want the files to be as big as they should be, then I have to set the width-property to 600px, which I think is odd..
The webpage uses Bootstrap 3.3.4.
There may be styles being applied by Bootstrap or something else, which are causing the issue. If you look in the inspector of your browser, it will show you all of the rules that apply to a given element. Also, your browser may be zoomed. The shortcut to reset it to default is usually Ctrl-0, though there is also usually also an option listed in the menus.
I'm working on a one-page-project that uses fullpage.js to create scrollable, viewport-filling secions. It's pretty straight-forward, on each slide there is one picture and some text. On devices with bigger viewports, I want the picture to float to the left and the text to appear at it's right side. For smaller viewports, I've added a media query that makes the picture fill the viewport width (width:96vw) and removed the float property (float:none; clear:both;). When I test this in any browser on my PC by reducing the size of the browser window, it works just fine, if the window's width reaches 800px (the condition in the media query is (max-width:800px)), the text jumps below the picture and the picture enlarges to the width of the browser window. The jsfiddle I created works as intended as well:
http://jsfiddle.net/GinSan/ehco10dh/
However, I've uploaded the project to my website and opened it on my android phone, and neither the Firefox nor the Chrome app seem to recognize the media query. It applies the float instead, which looks terrible in portrait orientation ... I've tried adding some more style-rules in the media query, none of which seem to be recognized by the mobile browsers.
I've stared at my media query for like half an hour, but I can't find any mistake. Can you? Or could this be related to the fullpage.js library? Or what else might be the problem? According to caniuse.com, media queries are supported by both android apps.
I would post a link for you to check out the problem yourself, but I'm not sure if I'm allowed to. Am I?