I am making a web user interface for an embedded device and I want to replicate that user interface in the form of a website.
Basically I need a single view container that will be centered on a desktop and resize according to the viewport, but fill a mobile screen. The image below shows what I want:
As far as I can see the common solution are media queries but those seem a bit tricky for what I want. Especially since I don't particularly care about the resolution, but more about the screen size. Pretty much any smartphone will have a large enough resolution to fit everything that I want. Probably an ideal solution would be just to ask the device if it is desktop or running on a screen larger than 8". But as far as I know that can't be done.
You can use
html, body {
width: 100%;
height: 100%;
}
#main_wrapper {
width: 100%;
max-width: 800px;
height: 100%;
max-height: 800px;
position: relative
margin: 0 auto;
}
This leaves open vertical centering (do you even want that?) or a margin-top for desktop-devices, which should be done with a media-query that includes min-width and/or min-height.
Related
Okay beginner here- trying to get this site to look good no matter what screen size.
This is the site page that works no matter the screen size:
https://jsfiddle.net/garixakor/j0xck25v/1/
I tried to center one of the paragraphs so it looks better in desktop view and when I do the text no longer fits neatly in phone size or when making the desktop browser smaller.
P.blocktext {
margin-left: auto;
margin-right: auto;
width: 20em
}
<p class="blocktext">Step back in time etc etc....
This change is shown in this fiddle:
https://jsfiddle.net/garixakor/5Lo4rtkc/
I am wondering if using media queries as in: if the screen size is the screen is 992x or more the centering is applied is possible or if there are other solutions or if I need to find a way around centering in this manner.
Try adding max-width: 100%. With just your width value if the screen width gets smaller than 20em the text container will flow outside the viewport and not wrap the text.
By setting max-width to 100% it makes sure that the text container cant be wider than the parent container.
P.blocktext {
margin-left: auto;
margin-right: auto;
width: 20em;
max-width: 100%;
}
P.para {
margin-left: auto;
margin-right: auto;
width: 70em;
max-width: 100%;
}
Using Object fit, if I set the height to 100vh it works properly, though if I change it to anything else, it no longer remains the correct size but shrinks down to fill the space as the window shrinks.
Is it possible to keep it proportional like at 100vh but to not actually have it take up the full amount of available space? I am ok with portions of the video being clipped off, I just cant seem to figure out how to get this to work.
Basically what I want is that on mobile 100vh is fine, I have text overlay on top of the video so the extra space works. But on large screens, there is too much unused space over this video (another as well on the full site but figure the same methods can be used to fix that also) and I would like to probably shrink it down to closer to 50 to 65% of the total size.
Below is the CSS I am using on the video currently, there is also a link to a live site of the video since I dont believe I can upload that to SO.
https://tsukiyonocm.github.io/test/
#services {
position: relative;
}
#servicesVid {
height: 100vh;
width: auto;
position: relative;
-o-object-fit: cover;
object-fit: cover;
}
your question is not very clear but i would recommend using Media queries to apply different styles for different media types/devices.
for example if you want to set a specific style for larger screen devices such as laptop you have to use :
#media screen and (min-width: 1400px) {
//your style for these devices that have 1400px+ screen width
}
The "rh" logo on my site is responsive vertically, ie fits perfectly to a tall thin window, but does not resize to a wide short window. Could anyone help me make the logo responsive to both width and height?
here is the website... (takes a bit to load up)
http://rhwebdesign.co.uk/
Here is my CSS:
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
To be very specific and address your questions about the logo, consider setting the max-height relative to the window's height.
You have:
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
.hero-logo img {
max-width: 100%;
min-height: 100%;
padding: 20px;
}
In order to scale the logo, add in to the latter block:
max-height: 100vh;
This sets the images maximum height to 100% of the viewport height, which appears to be what you desire here. Note that there is some text beneath it, which is not displayed, since it is text wrapped in an H5. These two lines are 68px tall (40px padding plus 28px for the text). So, you can adjust the above to:
max-height: calc(100vh - 68px);
It looks like in landscape mode (480x320), there is a script not calculating the size of margin correctly.
<div class="container hero-content" style="margin-top: -97.5px;">
have a look in main.js for this function:
heroContent.css({
"margin-top" : topContentMargin+"px"
});
Which is this:
topContentMargin = (heroHeight - contentHeight) / 2,
heroHeight = windowHeight,
contentHeight = heroContent.height(),
I haven't really looked into why it is calulating it incorrectly. My guess is that heroContent is too high for landscape mode because the image becomes 441px high with the media query max-width:100%. So it tries to add a negative margin to compensate.
My advice would be to remove the jQuery calculation of the hero content sizing and apply sizes using css and media queries only.
Edit:
You need to be more specific with your css. Learn some more about css specifity. You should include your largest media queries at the top, so the smaller ones will take precedence at the bottom. Makes things easier. Also IMHO, I wouldn't use queries for anything larger than iPad. ie. 1024px. Although you should always test on newer devices if possible.
You will need to specify the height of the video for each specific device size. I can't tell now, but maybe jquery was determining the section heights, so now the css is determining the video height.
So at the bottom of your style sheet, try this.
div#bgVideo.skrollable.skrollable-between video#video_background {
min-height:940px !important;
}
#media (max-width: 480px) {
.hero-logo img {
max-width:55%; /*looks nice at 480 */
padding:20px;
}
div#bgVideo.skrollable.skrollable-between video#video_background {
min-height:320px !important;
}
}
#media (max-width: 320px) {
div#bgVideo.skrollable.skrollable-between video#video_background {
min-height:480px !important;
}
}
But Richard, to be honest, you should be troubleshooting and testing the design yourself. How will you ever learn if you don't try. Remember, firebug is your best friend :)
So I'm building a website, which is suppose to have an image slideshow
I've set up a div for it:
<div id="slideshow">
</div>
with its corresponding CSS:
#slideshow {
position: absolute;
height: 28%;
width: 99.9%;
top: 10.5%;
margin: 0;
}
I've been trying to find a proper image size to fit the div, so that it doesn't show up differently on different screens. I've tried finding an unnecessarily big image, so that it would "scale down" to the div using height: 100% and width: 100%
But it always turns inconsistent in the two screens I test, normally too stretched. One screen has a resolution of 1336x768 and the other 1920x1080.
How can I keep an image from changing its ratio on different screens? (I think of a banner and how it's always consistent in every screen without stretching)
Typically when working with any kind of responsive design that will work across multiple screen resolutions you use the following.
img {
height: auto;
max-width: 100%;
}
This will also assure that the image keeps the correct aspect ratio.
Here are the full width banners which cause this issue. Im using a Plugin which enables you to upload a certain Image and set it up with a specific ID. So I Uploaded a jpeg with 2000px width and 600px height. Then I assigned the following CSS:
#bannerPages {
height: 296px;
margin-top: 183px;
width: 100%;
}
The banners look good on full screen, but they squish while down scaling the browser width. So I'd like to prevent the squishing effect and cutt the image while down scaling the browser size. How could I achieve this?
Looks like you have a media query that is making the width 140px !important.
Try changing the img on the media query to this
img {
width: 100%;
height: auto;
}
I played around with this for a while, but ultimately came up with two solutions depending on your needs. The first is easier to implement and more accurate to your requirements.
Remove the image from the bannerHome element and add the following code to the CSS.
.bannerHome {
background-image: url('http://www.gonpires.com/carmacks/wp-content/uploads/useful_banner_manager_banners/6-homeJV.jpg');
background-position: center center;
background-size: cover;
height: 890px
}
http://jsfiddle.net/9sqjs/2/
That method will only work in IE9+, Firefox Chrome, etc. Nice solution if you don't need IE8 support. You'll have to adjust your media queries as well. The other method requires more work and wouldn't crop the sides but it would fit and resize the image inside a 100% width container which would be cross-browser.
http://jsfiddle.net/Q64S2/1/
Have you tried making the image a background image instead?
For the .useful_banner_manager_banner classed div, you can set that large background-image so it'll essentially crop itself based on screen size.