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?
Related
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;
}
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 found StackOverflow extremely useful so thanks for any help in advance.
On http://test2.heyscout.com/, I'm wondering how to properly set up my background-image in my "hero div" for responsive web design. I've been playing around with numerous settings but I'd like it to:
stay in position consistently without jumping around due to browser size (for example, on the mobile phone, it gets misaligned or there's white space where there shouldn't be)
the 'Verify Anyone Offline' doesn't resize properly even though I set it in em
the button looks strange on a mobile device
What is the best practice for keeping the "hero div" in check? I'd surmise it'd have to do something with the min-height or perhaps fixing the dimensions of the actual image. Should I set the height of the hero div in percentage rather than pixels?
Also any advice on how to keep my "trimester div" fill up nicely the bottom 1/3 of the page consistently would be great- I'd imagine when the height of the browser is bigger than expected, it'd look strange. I've read that it's best to keep the height attribute alone for RWD but I'm wondering if there are any tricks to make sure it resizes properly.
Have you looked into Media Queries? Basically, they allow you to set specific CSS based on browser width (and height). This will allow you to control how your page looks at specific browser sizes.
Example - CSS at different widths:
#media screen and (max-width: 600px) {
/* add some CSS here for 600px maximum width*/
}
#media screen and (max-width: 960px) {
/* add some CSS here for 960px maximum width*/
}
To get the background image to always fill the div, use background-size: cover2 unless you need to support IE8.
If your font size doesn't look right across pc/tablet/handheld, try using media queries to set font sizes for specific resolutions.
I'm not sure how to help you with your button "looking strange", except to offer profuse sympathy.
In the future, try to keep your questions more focused. :)
give
background-size:contain;
and this may solve your problem, because it will auto adjust size by contain!
I am stuck on a css layout for a site I'm working on. It is a reports tool, and will be used on both wide screen monitors and netbooks. The site is done, except for a stylesheet which can degrade nicely from the (very) widescreen format to a narrow (netbook) format.
This is how it should appear on a wide screen:
http://s1.postimage.org/1d67kaxdw/pageverywide.png
And for a narrow screen:
http://s1.postimage.org/1d65wrkw4/pagenarrow.png
I'd like it to degrade into the right one in the narrow pic, but I think the left one will be more doable.
I know I can do a conditional css load depending on the screen size, but I would like it to just be one stylesheet. The core of the problem is that I want the right (graph) content to be vertical and centered on it's part of the page when wide, but then centered and horizontal above/below the table when there is no space for it to be displayed. Vertical scrolling is okay. The table with the red sides is of dynamic height, which has also been a problem.
I have a layout which centers the right graph data as described, but cannot figure out how to force it horizontal from vertical or vice versa. How can I use a single css sheet to accomplish this?
I know I can do a conditional css load
depending on the screen size, but I
would like it to just be one
stylesheet.
What you can do is look into media queries, a new feature introduced in CSS3. They allow you to specific a set of certain rules depending on the screen size, 1 file and no javascript.
Here is an example
#media screen and (max-width: 600px) {
.graphs{
/* change position */
}
}