I'm working with Foundation's 12-column grid and it is working as expected - I have the logo as a large-4 and medium-6 column, and then full 12 columns for small screen. Everything is great, except for when I rotate my iPhone to landscape orientation and the logo is then too big (tall) to fit in the screen, since it is still a "small" screen, so it takes up the entire width of the screen and thus is too big for the screen (since it is as tall as it is wide).
So my question is, what's the best way to fix this? If I use an orientation media query to make it smaller for landscape screens, then it is too small on a large landscape screen (such as a laptop or computer screen). Also if it is not the full 12 columns for the small screen size, then it is too small in portrait orientation on a mobile device.
Thanks.
(View full screen and resize or view on phone to see the problem.)
See CodePen here
<!---->
http://codepen.io/mrseanbaines/pen/dOdoEy
There's a couple ways you can address this... if you're going to have a bunch of things you think you'll want to customize for this you can add a custom breakpoint for that intermediate stage (see http://foundation.zurb.com/sites/docs/media-queries.html#sass-variables).
That said, if you just want to target this image in particular, it might well be sufficient to just put a max height on it, something like
#logo {
margin-bottom: 20px;
max-height: 50vh;
}
Related
What I'm trying to say is:
I'm using squarespace for my website and it's all super cool and super easy to use for a novice like me but, I need to put some css for minor things, especially for the mobile look, because in squarespace 7.1 now you can't edit just the mobile view, but all together necessarily.
So, in specific, I want to enlarge a photo so that it will take all of the width of the screen on my phone.
#media only screen and (max-width: 620px) { #block-6735a6ae2178770cbb51 {aspect-ratio:9/20; margin-top:250px; margin-bottom:200px;padding:0px}
#block-6735a6ae2178770cbb51 .img-block-wrapper{aspect-ratio:9/16}
#block-6735a6ae2178770cbb51 .sqs-image-shape-container-element{aspect-ratio:9/16; width:400px; height:320px;}
#block-6735a6ae2178770cbb51 img{object-fit:cover; object-position:-80px} }
So the width and the height are the ones changing the dimensions of the rectangle where the photo fits in.
My question is. On my phone it fits heavenly, but maybe because the width is the same as the one of my screen, would it be the same on another screen or would it mess it all up and the photo will go too out or too in on the screen? Will it resize automatically on another phone to fit its screen or will it stay the same? In second case is there a way to make it scale automatically based on what screen resolution is viewing the photo?
I have set up a background-image for large and medium screens.
I have a touchbar macbook and it fits perfectly.
If I play with the mouse to make the window smaller (to see how it would be for different resolutions and less pixels), it's completely responsive and looks fine (it cuts a bit the right part of the picture but it's not zooming).
Same when I open the developer tools, the Ipad pro version is half-cut but not zoomed.
But when I try to go on the website with an older macbook, the image is completely zoomed and does not fit the screen anymore.
I don't understand how there can be such a difference as we have different resolutions but same inches.. And as when I play with it on my computer, the image stays at the right size even with less pixels.
How can I solve this problem? Why is it doing this? I am fine if the image is a bit cut on the right or left side but I don't want it to be zoomed.
I have tried - height: auto, width: 100vw, background-size:contain (but it's too small) and no-repeat... basically everything with css
background-image: url(/assets/dessin-ba68b8b….png);
background-size: cover;
height: 100vh;
Thank you
When you use cover for background it is guaranteed that the same image will NOT look perfect on all screen sizes, since the browser needs to display it in different dimensions.
To handle this you may generate several images, each for screen size you aim at and use CSS media queries to apply the appropriate image for each screen size.
Im a total newbie as far as mobile devices are concerned. Anyhow, i created a webpage (still under construction) and implemented it on the existing wp theme called govpress (yes, i know it might not be the most practical way to make things happen but with my coding skills it was the easiest). Now i just cant get it working correctly with mobile devices. I havent found the code that makes it behave as it does. So, on a mobile it seems to scale the page to screen width resolution of the device(?). Also the background and the header div (full width) scales to device screen width. And even if i zoom out it doesnt enlarge the bg nor the header div. Is it the theme that has this behavior somewhere coded or is it somewhere in the css..!? Heeeelp, please!!!
Find the site on http://www.lifespectrum.eu
And heres my css: http://lifespectrum.eu/wp-content/themes/govpress/style.css
(lots of thrash there though)
Please ask if you need anything else!
Thanks in advance!
The scaling is done in the css file via media queries. Adjust these statements accordingly to make the background/header do what you want:
#media screen and (max-width: 840px)
#media screen and (max-device-width: 680px)
#media screen and (max-width: 480px)
Mobile behaviors are CSS. Your last CSS codes #media screen and (max-device-width: 680px) are doing this behavior. You can easily check your responsive style just by making your desktop window screen smaller and larger. By doing this, you can easily see that your logo header is responsive but your body content is staying the same.
I would inspect element on the body and do the same as you did with the .logo You can preview your changes by editing right in the inspect element with chrome (right-click & inspect element) just to see how it'll look.
It looks like your background/header are the only elements that have css written to resize them in the media queries cfnerd listed.
The content area has the classes you need to adjust settings for in the media queries at different widths. For example, you have .topwhite and .top divs set in the css to a static width of 810px. Once the window width is smaller than 810px those will give you the nasty horizontal scrolling bars. One quick fix is to set them as a
width:100%;
max-width:810px;
so that at most they can go to the original size you set but as the device or window width gets smaller the size of those divs will shrink along with it. That will only help you with the containers, you will have to also add new css settings for the contents as well. But you can use the same idea.
You may need to implement the viewport mets tag. See https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Could someone help me out with a suggestion on this fixing the text frames on this wordpress website page http://www.blackcoatinnovations.com/#third
The formatting looks well if the browser is the right size but as soon as you make it smaller, the text frames and picture become squeezed.
It is interesting to note that if you squeeze it A LOT, then the text frames change orientation and go one above the other and this is what it looks like on a smartphone so if possible I don't want to destroy this mobile friendly feature. But is there a way to avoid that "in between" situation where the text frame is messed up?
This is because it's responsive and will adapt percentage wise to the available screen space. If you look at your Bootstrap css file here: http://www.blackcoatinnovations.com/wp-content/themes/BootstrapParallax/css/bootstrap-responsive.css, you can set where that responsive trigger should happen.
So you have there #media (min-width: 768px) and (max-width: 979px)
It mean until it reaches the width of 767 (one less than the min width), it's going to squeeze and then as soon as it reaches 767 - go to phone layout. If you set you min-width higher on this line and your max width higher on the next media query, you could get it to snap where you want it to.
There are other ways, but this would be a quick fix.
I've got a couple of problems, Using media queries I change the position and font size for mobile/tablet and desktop, the problem is, if your changing the window size the font size and a couple of social icons are taken out of place.
So mobile 320, tablet 768, desktop 960-1280+ are the sizes I've designed for.
#media only screen and (max-width: 320px) {
.footer-top ul.links li {
font-size: 0.60em;
}
ul.home-social {
width:73%;
margin-left:auto;
margin-right:auto;
}
}
This is the example of font change and social icon position, but if the window is resized by the user the icons are out of place. Any Idea's ? I just want it to flow well or is there no point?
First of all I just want to say one thing, that the sizes of phones, tablets, etc are all extremely relative. While you may have designed something for 320 and for 768 the varying sizes of all of the different phones and ALL of the different tablets is going to make it impossible to make a pixel-perfect design for each.
As far as the position of the elements and font sizes being affected by the user changing the size of the window and it being incorrect, you'll have to find a way to align them so that they work well within whatever size they are currently being viewed at. Instead of having text next to the icons and messing with trying to get both Alignment and Font-Size to work based on a lot of screen sizes, try breaking them out so that the icons and the text are on two different horizontal lines, possibly?