I don't believe I'm grasping how to create a responsive website. this is my code:
body{
width: 100%;
font-size: 16px;
background-color: grey;
}
h1{
color:black;
}
p{
color:black;
}
#media only screen and(min-width:320px)and(max-width:420px){
h1{
color:red;
}
p{
color: white;
}
}
my goal with this small css edit was to see if I understood how the media query worked and to change the h1 and p element colors when a screen size is in-between mobile size.
however, regardless of what size the screen is, there is no changes the elements. I'm slightly confused because I've seen videos of people using this as an example.
You have the right order of things, normals rules first and then mobile rules afterwards.
Let's say you have two buttons on the screen for a desktop and a phone. Because a mobile phone obviously does not have the width to spare you may want to show the buttons above and below each other instead of side-by-side.
I have a phone with a horizontal screen width of 375px. If the buttons are rendered as 250px then they blatantly won't render side-by-side on my phone without clipping and therefore looking messy to visitors.
Take this code in to consideration:
input[type='button'] {display: inline-block; width: calc(50% - 8px);}
#media (max-width: 1024px)
{
input[type='button'] {width: calc(100% - 8px);}
}
The button input elements are set to use (roughly) 50% width (compensating a bit for border and margin). Since they are inherently display: inline; I'm using display: inline-block to keep them rendering on the same line (no line breaks for outright block rendering) though allow setting the width hence inline-block.
The media queries do not negate something like display unless it's explicitly defined, again so all the input buttons are still rendered as inline-block. But now on a mobile screen these buttons will use up enough space that they'll push each other to separate lines.
Related
I'm looking to add black padding/margins to my long-form sales page.
example of black margins.
Looks great when I enter the following code into the head when viewing on desktop.
However, when I take a look on any mobile, its just awful - margins from the code are applied to the mobile version so it looks scrunched up into a barely-legible web page.
How can I make these margins appear on desktop view and not affect the mobile appearance?
Not so keen with any of this, and tried the lazy-man's approach by inserting this into just the html head...will this take some CSS coding?
Thanks.
<style>
html {
background-color: black;
}
body {
margin:75px;
margin-top:0px;
background-color: white;
}
</style>
You're looking for what are known as media queries. These allow you to write CSS rules which only target specific viewports, and are denoted by #media.
If you want your code to only apply for desktops, you can use somethjing like the following:
#media screen and (min-width: 768px) {
html {
background-color: black;
}
body {
margin: 75px;
margin-top: 0px;
background-color: white;
}
}
The above will only apply your rules to viewports that are 768px wide or wider (which covers tablets, laptops and desktops). If you want a more finely-tuned media query, you can check out CSSTricks' article on media queries for standard devices. A fairly comprehensive list of device viewport sizes can be found here.
Note that you can make use of multiple media queries for multiple different viewports, and if you're using a responsive framework like Bootstrap, Skeleton or Toast, then several media queries will be baked in by default.
On our website: https://dev.shiftdivorceguide.com/ everything looks great on desktop.
When I switch to smaller screens like tablets I get a padding to the right of the screen. When I go even smaller (smartphones) I get an even larger padded area to the right of the screen.
I am unsure if the Panic Button bar at the top may be interfering with the code of the page (.panic-button-container). I have already tried altering the CSS in the media queries. To reduce the size of the white area on tablets I changed the code below concerning the logo and navigation widths.
I changed:
#media (max-width: 1024px) and (min-width: 981px) {
.header-right-panel {
width: 40%;
float: right;
}
}
to:
#media (max-width: 1024px) and (min-width: 981px) {
.header-right-panel {
width: 80%;
float: right;
}
}
This helped a little with the layout but I still get a white bar on smaller screens. The smart phones are the worst. Any possible solutions would be appreciated.
Stop using floats. Use Flexbox. Too many clearfix divs in the way.
Obviously the footer is extending past the site content body as well as some other elements.
If you really want to narrow it down set this style:
* { outline: 1px solid red }
That way you see what container is over-extending and then set it's width to 100% instead of a fixed width.
EDIT 2:
Using my technique I have narrowed down the problems:
.footer-menu
remove width: 500px;
.lp-section-content row
remove all negative margin
.vc_column-inner vc_custom_1548439628787
remove all padding
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 :)
I am trying to group two buttons together.
I have a design that works on big screens, with two buttons floating to the right on the same line. However when resizing, there is one button that will get onto the text :
The requirements are :
the buttons are on the right of the text when the screen is big enough (works fine)
the buttons get on top of each other (instead of next to each other like in the screenshot) when the screen gets smaller. They also should have the same width in this case.
Sure, you just need to use media queries in CSS.
In your media query you can define min-width or max-width. Min-width lets you say that at x screen width and larger, follow this set of styles. Max-width is at x screen width and smaller. Best practice is to use min-width and style your site for smaller screens first and then apply more complex styles on top of that with media queries. However if you just need it for one element, it's okay to work down:
#media screen and (max-width: 768px) {
.button-container {
float: none;
display: block;
}
.button {
width: 200px;
display: block;
}
}
I have text wrapped in <div>s, and would like to make the whole thing fluid including the font-size of the text, i.e. the text resizes itself in response to the size of the containing element.
I came across a Javasript + CSS solution, but just wondering if it is possible to do so with pure CSS?
While Jim has given you accurate information, it strays from the question asked slightly. Responsive design (#media queries) can alter the text according to screen size. From what I understand, you were asking if there is a pure CSS solution for fluid text size (continual resizing of text during window size changes).
Here is a link to css-tricks explanation of new font sizing techniques. Please be aware this is new and older browsers will most likely have some issues, and that even newer ones (Chrome + Safari) are still not bug-free.
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
Edit- added code
Yes, look at CSS 3 media queries. You can provide different style rules depending on the viewport width. This includes altering the font size.
Short Answer
You can't have fluid font sizes, but you will when viewport-percentage lengths are widely available.
Long Answer
You have to understand these two terms: responsive and fluid.
Responsive means you make your stylesheet respond differently to different window sizes. This is done by using CSS Media Queries. While responsive is one of the hippest words in web design, it mostly means hardcoding CSS for different absolute lengths until you drop dead of boredom.
Fluid means you work with relative length units such as percentages. When you work with relative length units, every size is calculated automagically.
Example
Let's say you have a <div> inside the document body and you want it to fill half of the window.
The responsive solution is this:
#media (max-width: 1px) {
body > div {
width: 0.5px;
}
}
#media (max-width: 2px) {
body > div {
width: 1px;
}
}
#media (max-width: 3px) {
body > div {
width: 1.5px;
}
}
#media (max-width: 4px) {
body > div {
width: 2px;
}
}
/* Repeat until you reach gigabytes and hit operating systems' file size limitations. */
And the fluid solution:
body > div {
width: 50%;
}
So?
What limits us today is that there is no wide support for viewport-relative length units. What you can do is drop the whole idea of "pure CSS fluid font sizes" and go responsive.
use calc with media query for a responsive and fluid font
#media screen and (min-width: 25em){
div {
font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) );
}
}