I am trying to get text to be full width on a large device and then stacked on a mobile device with larger text.
I realize I can do something like displaying none for the large text if the browser is small and then setting three text blocks to col-12 for the small device, but that seems like a lot of html duplication. Is there a better way to solve this problem?
My code is below. I recognize I can override the font size with the bootstrap overrides for a small device. I just need help stacking the font.
I included a codepend here: http://codepen.io/anon/pen/pRQZdR
<h1 class="title-text-md col-lg-12"><strong>Example Text to Be stacked with larger font on mobile</strong></h1>
#include media-breakpoint-up(sm) {
.title-text-md {
font-size: 20px;
}
}
Add this css this might do the trick.
#media (max-width: #screen-xs) {
h1{font-size: 30px;}
}
#media (max-width: #screen-sm) {
h1{font-size: 4px;}
}
#media (max-width: #screen-md) {
h1{font-size: 400px;}
}
#media (max-width: #screen-md) {
h1{font-size: 40px;}
}
h1{
font-size: 1.4em;
}
Hope this helps!
Related
I'm having hard time trying to fix this small issue with my website, so the body text shows in white on the desktop, which is good, but when I use the smaller devices I don't want the text to show white because it collapse with the white background and you can't read the text. How can I change it to another color for mobile versions, with CSS, or HTML?
This Is How It Shows On Desktop
This Is How It Shows On Smaller Screens (Phones, Tablets, etc)
Edits from Stackoverflow (that didn't work)
CSS:
#media only screen and (max-width: 600px) {
.mob1 {
color: #ffffff;
}
}
#media only screen and (min-width: 600px) {
.mob1 {
color: #000000;
}
}
HTML:
<p style="color: aliceblue;" class="custom-article wow fadeInDown" data-wow-delay=".2s"><span class="mob1">Changed Text</span></p>
I tried to add the mob1 to the p class, didn't worked either.
Try to use media queries.
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
For more details: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
try this
on the html file, if it is a p element, or whatever type of text element it is,
<p class="colourTest">TEXT</p>
in the css file:
//for screens smaller then mobile
#media only screen and (max-width: 600px) {
.colourTest {
text-color: black;
}
}
//for screens bigger then mobile
#media only screen and (min-width: 600px) {
.colourTest {
text-color: white;
}
}
Is there a way to do this with html and css or can I only do it with javascript/bootstrap? I'm fairly new to coding so detailed explanations if possible would be nice!
You can do that with css media query. If you are begineer here is a small tutorial on that CSS media query.
According to mobile device size you can hide the navbar.
EXAMPLE:
#media only screen and (max-width: 600px) {
.navbar{
display:none;
}
}
You can hide show with the help of #media screen to show or hide the code in different devices sizes.
Examples:
#media screen and (max-width: 767px) {
.hide_on_mobile {
display: none;
}
}
#media screen and (min-width: 768px) {
.hide_on_mobile {
display: block;
}
}
Yes you can.
There several approaches to do that
Detect device is touchable (e.g. with Modernizr like tools) - I do not recommend, cause nowadays event laptops provided with touch displays.
By device's viewport - here's the good table list with most popular devices viewports by Adobe
I prefer second approach
So the solution comes in hand with CSS media-queries
And read about mobile first techniques
Example (press the Full page button after running snippet to look how it's gonna look in desktops)
<style>
#navbar {
display: none;
}
#media (min-width: 640px) {
#navbar {
background: lightblue;
height: 60px;
}
}
main {
background: #ccc;
min-height: 40vh;
}
</style>
<div id="navbar"></div>
<main></main>
Currently I am working on a website to gain some experience, but I struggle to make changes only to the mobile version. For example:
<h1 class="intro-header__title">
<span>Are you ready to</span> Expand your horizon
</h1>
In order to make CSS changes for the desktop version I have:
.intro-header__title {
font-size: 2.6rem;
font-weight: 700;
margin-bottom: 15px;
}
Now I want to hide the follow part on the mobile version:
<span>Are you ready to</span>
So what I tried is the following:
#media (min-width: 768px){
.intro-header__title {
display:none;
}
}
#media (min-width: 960px){
.intro-header__title {
display:none;
}
}
Unfortunately this does not seem to work. I have the same problem with text that is compressed on the mobile version. I would like to change the borders only on the mobile version and not the desktop version. Here is how it currently looks (compressed text due to borders):
You need to add the media type to the #media query (in this case "screen"). Your current rules are also only used on screens with a width of more than 768px or 960px. But you want to format the mobile version so you have to use the max-width instead of min-width:
.intro-header__title {
font-size: 2.6rem;
font-weight: 700;
margin-bottom: 15px;
}
/** all screens up to 768px width */
#media screen and (max-width: 768px) {
.intro-header__title span {
display:none;
}
}
/** all screens up to 960px width */
#media screen and (max-width: 960px) {
.intro-header__title span {
display:none;
}
}
<h1 class="intro-header__title">
<span>Are you ready to</span> Expand your horizon
</h1>
Note: You also use two media queries doing the same. So the first media query (max-width: 768px) isn't needed because the other media query do the same on a larger screen.
You can find a useful list of screen sizes for the different devices on StackOverflow: Media Queries: How to target desktop, tablet and mobile?
Is there a way of setting all font sizes to scale down x amount in a media query, instead of setting font size for each element ( h1, h2, h3 ).
Currently I have a media query that looks like this:
#media only screen and (min-width : 1200px) {
body {
font-size: 20px;
}
}
This, however, doesn't set sizes for headings. Is there any way to include all text on a site? Thanks
Yes, basically you set font size in pixels for a root element like html and then you can use rem units to set font sizes for other elements. In your #media rule you will have to change just font-size property for html element and it will equally affect other elements since they depend on root's font-size because you use rems.
html {
font-size: 12px;
}
p {
font-size: 1.1rem;
}
.footer {
font-size: .9rem;
}
#media (max-width: 767px) {
/* now the basis for all the font sizes set in
rems is 10px. For example, font-size for p is 10*1.1 = 11px.
Previously it was 1.1*12 = 13.2px. */
html {
font-size: 10px;
}
}
div{font-size:15px;}
#media screen and (max-width:1200px) {
div{font-size:20px;}
}
#media screen and (max-width:600px) {
div{font-size:25px;}
}
#media screen and (max-width:320px) {
div{font-size:50px;}
}
<div>test font size</div>
I am in despair. I am trying to make a website and make it mobile-friendly and responsive, however, I cannot seem to get any kind of media query to work at all! All my sizes, width and heights are in "%/em" and my font-sizes are in "vw/em". The biggest problem I get is that, as the screen shrinks, so does my text, to the point where it simply becomes eye-straining to read! I don't see relevant to send any code but if need be, I shall send some of my code (my website is still offline and I cannot put it out there if this problem isn't fixed).
Here's what I have tried:
I have tried putting this in my tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
No success when I try media query in a tab or in a separate css stylesheet.
I have tried removing it aswell.
I have tried these media queries for my font-sizes:
#media (max-width: 400px) {
body { font-size: 60%;}
}
#media only screen and (max-device-width: 800px) {
body {
font-size: 80%;
background-color: blue;
}
}
#media (max-width: 1100px) {
body { font-size: 120%;}
}
I have also tried other media queries but absolutely NOTHING changes at all! Am I doing something wrong? Probably but what?!! This is leading to so many problems! I cannot change my header according to different screen sizes, I cannot change my display, my header links are a mess, etc.
Also, please note that I am a beginner and I do not use any javascript, bootstrap or whatever.
Thank you in advance for your help!
Your queries are a little weird. Perhaps with some logical constrains you can achieve what you are looking for? This is what I mean:
#media (max-width: 400px) {
body{
background-color: yellow;
}
}
#media (min-width: 401px) and (max-width: 800px){
body {
background-color: blue;
}
}
#media (min-width: 801px) and (max-width: 1100px) {
body {
background-color: purple;
}
}
#media (min-width: 1101px){
body{
background-color: orange;
}
}
In my humble opinion, setting the intervals using both min-width and max-width help me visualize what's going on better. This pen shows the colors changing whenever you change the width. It doesn't do much good, but it's something to get started with media queries.
EDIT:
Pen contains transitions between colors because cool
Usually, it's better to use media queries based on minimum screen width. Here is an working example with the code you posted:
Codepen: http://codepen.io/anon/pen/eNJXXp
#media (max-width: 400px) {
p { font-size: 60%;}
}
#media (min-width: 400px) {
p {
font-size: 80%;
background-color: blue;
}
}
#media (min-width: 800px) {
p { font-size: 120%;}
}