Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I'm practicing the one thing that scares the hell out of me: responsive CSS.
I made a header like this one, mostly via use of positive/negative margins. However, it becomes a mess once I start changing the viewport's dimensions.
Were it just a simple h1 (such as only the 'Grandmaster'), I'd use font-size: 5vw, and it'd scale. However, since it's more complex, just throwing vw units around doesn't help.
What is the best way to have a complex header like this scale well across all screen sizes?
My idea:
Make it either a SVG or a JPG, then have a h1 with display:none or some other trick (such as moving it off screen with position:absolute) for SEO. The pro is that making it an image is probably the easiest way to let it scale everywhere properly. The con is that, as far as I'm concerned, it still hurts SEO.
Is there one estabilished way to deal with such a case?
There are many strategies you could go about this one, since it is very opinionated, the best solution would be to keep the text, use some span for the various parts of the text and use em units to size them, then just change the font-size on the parent element and the various parts will scale accordingly. Use media queries #media to change the parent element's font-size in critical breakpoints.
body {
margin: 0;
}
.header__title--content {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 50px 0;
background-color: red;
background: url('https://picsum.photos/2000?grayscale');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
font-family: 'Times New Roman', serif;
}
#media screen and (min-width: 400px) {
.header__title--content {
font-size: 3em;
}
}
#media screen and (min-width: 800px) {
.header__title--content {
font-size: 4em;
}
}
#media screen and (min-width: 1000px) {
.header__title--content {
font-size: 6em;
}
}
.header__title {
display: grid;
margin-bottom: 0.1em;
}
.header__title--element-one {
font-size: .75em;
margin-left: 1.7em;
line-height: .9em;
}
.header__title--element-two {
font-size: .5em;
margin-left: 2.5em;
line-height: .6em;
}
.header__title--element-three {
font-size: 1em;
line-height: .6em;
}
.header__subtitle {
font-size: .4em;
text-transform: uppercase;
line-height: 1em;
}
<hgroup class="header__title--content">
<h1 class="header__title"><span class="header__title--element-one">Story </span><span class="header__title--element-two">of the </span><span class="header__title--element-three">Grandmaster</span></h1>
<h2 class="header__subtitle">bobby fisher, the some content goes here</h2>
</hgroup>
try using css media queries for example：
h1{
font-size: 30px
}
#media screen and (max-width: 790px) {
h1{
font-size: 15px
}
}
#media screen and (max-width: 790px) this means For screens that are 790px or less, set the font size to 15 px you can read more about it here https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Related
So the client isn't happy with how their site is rendering on their laptop because Windows scaling (not to be confused with browser zoom) is set to 125% by default. The site isn't broken but they don't like the overall level of zoom.
After a bit of research, it looks like a recommended and default scaling above 100% is not unusual on some laptops (especially newer laptops with their higher pixel density). It has been suggested to me that converting all px based CSS to rems (which is a big job) might be able to fix this. However, I've run a test using a base font size of 10px and then rems for breakpoints and for fonts and it doesn't look any better when I switch between different scales.
To my mind, if the OS is set to scale greater than 100% then everything, websites included, will display accordingly. I'm wondering if I am missing something here? I happen to be working from a very crappy old low res screen so perhaps this is a confounding factor?
fiddle using rem
html {
font: 10px;
}
.wrapper {
display: flex;
justify-content: center;
.inner {
flex: 1;
padding: 1rem 2rem;
background: hotpink;
p {
font-size: 1.6rem;
}
}
}
#media (min-width: 60rem) {
html {
font-size: 16px;
}
.wrapper {
.inner {
flex: 0 1 50rem;
background: goldenrod;
p{
font-size: 1.125rem;
}
}
}
}
and fiddle using px
font: 16px;
}
.wrapper {
display: flex;
justify-content: center;
.inner {
flex: 1;
padding: 10px 20px;
background: hotpink;
p {
font-size: 16px;
}
}
}
#media (min-width: 600px) {
.wrapper {
.inner {
flex: 0 1 800px;
background: goldenrod;
p {
font-size: 18px;
}
}
}
}
Is there a solution?
Thanks
Because of your client's device pixel ratio, website is probably serving an unexpected responsive version to their screen "real" width.
For example: assuming you're using breakpoints like Bootstrap's ones, if their monitor has a resolution width of 1200px (extra large device) but scaling is set to 125%, browser will zoom everything out to 80% and make website serves the version corresponding to a screen width of 960px (large device).
(See this site to test "true" and adjusted sizes to a monitor.)
Depending of how your website is builded, you could workaround this by:
(1) Adjusting viewport width with JS, in a similar way to what was proposed in this thread:
document.querySelector("meta[name=viewport]").setAttribute('content', 'width=device-width, initial-scale='+(1/window.devicePixelRatio));
(2) Tweaking your stylesheet to make breakpoints reflect real device width:
#media (min-width: 1200px), (min-width: 960px) and (-webkit-device-pixel-ratio: 1.25) {
/* your code here */
}
Or even detecting your client's specific pixel ratio and then zooming everything out, like that:
#media (-webkit-device-pixel-ratio: 1.25) {
* {
zoom: 0.8;
}
}
(Please note that in these scenarios you'd need to use a non-standard, although well supported #media feature.)
I am trying to make 1 of my pages responsive for mobile screens, I created 2 arrows and text just above the body div.
Now i only want these arrows and text to appear when screen is below 800px.
How can i do that ?
i tried this:
{display none only when screen above 800px}
not working!
#media only screen and (max-width: 800px) {
.box11 .arrowRight {
text-align: center;
color: #204486;
padding: 10px;
margin: 10px;
display:none;
}
.box11 .arrowP {
text-align: center;
color: #204486;
padding: 10px;
margin: 10px;
display:none;
}
Missed closing brace and changed max-width to min-width, thanks
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
my media screen does not seem to be responsive to my pages tag. Not sure if there is an order problem but would love some help.
I have tried looking this up on w3schools and on here but cant seem to figure it out
.pages {
margin-left: 2%;
}
a:link {
text-decoration: none;
}
a:visited {
color: yellow;
}
a:hover {
color: white;
}
#media only screen and (max-width: 400px) {
.egg {
margin-left: 10px;
margin-right: 10px;
}
.cheese {
margin-left: 10px;
margin-right: 10px;
}
.croissant {
margin-left: 10px;
margin-right: 10px;
}
.pages {
margin-left: 5%;
}
}
I am expecting the margin to change in .pages but with no luck!
Try this: Codepen as a simple example
<div class="foo">foo</div>
.foo {
background-color:red;
margin-left: 1%;
}
#media only screen and (min-width: 800px){
.foo {
background-color: green;
margin-left: 10%;
}
}
A good practice is starting mobile-first with your css styling so you only have to change relevant things on viewport-changes and avoid code duplication. So you start with your mobile styling without a #media-query and work your way up and add min-width media-querys.
Try
#media only screen and (min-device-width : 400px) {
classes here
}
Only specify size of classes/IDs/tags inside the {..}
On really small devices I want to align the title text on the screen.
So I added the text-align and vertical-align.
Now when the browser is larger, I want to remove these 2 css properties.
How can I do that?
.main-title {
text-align: center;
vertical-align: middle;
#include media-breakpoint-up(sm) {
text-align: inherit;
vertical-align: inherit;
}
}
You can use media queries only for small devices.
For example:
#media screen and (max-width: 600px) {
.main-title{
text-align: inherit;
vertical-align: inherit;
}
}
I feel like I'm about to feel very silly in a second, but I can't for the life of me figure out what's wrong with my media query. I'm using Adobe's Brackets as my code editor, and originally thought there was a glitch in the program. But then I tested the code in jsFiddle and it's not working there either, so I must be fudging something up with the code.
Can anyone see what's wrong?
Here is my jsFiddle
HTML
<div class="helpful">
<span class="thumb">Did you find this helpful?</span>
<span class="readers">82 Readers found this helpful</span>
</div>
CSS
.helpful .readers {
color: #35cb1a;
font-size: .9em;
}
.helpful .thumb {
float: right;
color: #7b7b7b;
font-size: .9em;
}
#media screen and (max-width: 1020px) {
.helpful .readers,
.helpful .thumb {
display: block;
margin: auto;
}
}
display: block; margin: auto on elements with no specified width has no effect, since blocks with auto width stretch to the full width of their container leaving no room for margins.
Furthermore, auto margins have no effect on a floated element, and a floated element is display: block by definition.
So your media query is working, but the styles in it don't have any apparent effect on the given layout.
If you want the floated element to stop floating at 1020px and narrower, you need to override the float declaration.
If you want the text to be centered, use text-align: center instead of margin: auto.
If you want the two elements to stack vertically, keep the display: block declaration.
Putting it all together:
#media screen and (max-width: 1020px) {
.helpful .readers,
.helpful .thumb {
display: block;
text-align: center;
}
.helpful .thumb {
float: none;
}
}
you code is perfectly fine as you want to centre align those div after some 1020px width and for that you have use this css
#media screen and (max-width: 1020px) {
.helpful .readers,
.helpful .thumb {
display: block;
margin: auto;
}
}
But you always need to mention width if you are using margin:auto.
I am assuming width of 200px so css should be like this
#media screen and (max-width: 1020px) {
.helpful .readers,
.helpful .thumb {
display: block;
margin: auto;
widht:200px;
}
}
Working fine in this fiddle https://jsfiddle.net/vgrtety9/3/