I have header text overlaid on an image. The issue is that on higher resolution desktop screens (e.g., > 1600px) the header only takes up a small section of the image width. I want the header text to take up ~90-100% of the available width regardless of the res.
http://www.dailyspiro.com
<div class="container-fluid">
<div class="col-md-12 landing-container">
<img src="images/pig.jpg" class="main-image" width="70%">
<div class="uvp">
<h1>Spread Compassion & Track Your Impact</h1>
<button class="join-button">Join Now</button>
</div>
</div>
</div>
.uvp {
padding: 5px 5px 5px 14px;
width: 70%;
background: rgba(66,51,51,.77);
margin: -119px auto 0px auto;
display: block;
text-align: left;
}
.uvp h1 {
color: #fff;
font-size: 247%;
margin-top: 12px;;
}
.landing-container {
padding: 0;
margin: -15px auto 0 auto;
text-align: center;
}
.main-image {
z-index: -1;
position: relative;
}
If you want the header take up ~90-100% of the available width space for higher resolution desktop screens (e.g., > 1600px), style the header accordingly using specific Media Queries.
You can use Media Queries, Some media queries for Standard Devices are:
/* Large screens ----------- */
#media only screen
and (min-width : 1600px) {
/* Styles */
/* Set your font-size here */
}
CSS:
/* Large screen above 1400px */
#media only screen and (min-width: 1400px) {
body {
.uvp h1 {
font-size: your larger size here;
margin-top: your larger size here;
}
}
}
Note: you have double (;;) semicolon in your above margin-top marking.
use cssmediaqueries
CSS Media Queries are a feature in CSS3 which allows you to specify
when certain CSS rules should be applied. This allows you to apply a
special CSS for mobile, or adjust a layout for print.
#media only screen and (max-width: 1633px) and (min-width: 1400px) {
.uvp h1 {
color: #fff;
font-size: 247%; //use your desired bigger font size
margin-top: 12px;;
}
}
Related
How would I go about having my text be bigger, so my text goes to the bottom of the tab (without a scrollbar showing up or anthing) and when the tab gets smaller, make the font smaller.
h1 {
font-size: ?;
}
div {
length: according to browser;
}
You can use height: 100vh; to set height according to screen height, and for font-size you can use #media queries to set font size for different screen.
body {
margin: 0px;
padding: 0px;
}
div.box {
height: 100vh;
background-color: #666;
}
h1 {
font-size: 50px;
color: #ffffff;
margin: 0px;
padding: 30px;
}
/* Extra small devices (phones, 600px and down) */
#media only screen and (max-width: 600px) {
h1 {
font-size: 25px;
}
}
/* Small devices (portrait tablets and large phones, 600px and up) */
#media only screen and (min-width: 600px) {
h1 {
font-size: 35px;
}
}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {
h1 {
font-size: 45px;
}
}
/* Large devices (laptops/desktops, 992px and up) */
#media only screen and (min-width: 992px) {
h1 {
font-size: 55px;
}
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
#media only screen and (min-width: 1200px) {
h1 {
font-size: 65px;
}
}
<div class="box">
<h1>Karar Barcha</h1>
</div>
You can use vw for font-size if you want to be changed size by resizing of browser:
However, using vw for elements such as text means you may want to use media-queries for mobile devices to avoid very small text, such as the <p> element.
h1 {
font-size: 4vw;
}
<body>
<h1>arman ebrahimi</h1>
</body>
Can the width or height of the browser screen be used to determine the transition, or animation of a tag's opacity (css)? If so how?
For example as the width of the browser screen gets bigger, fonts become more clear.
Any resources are appreciated, thanks!
For example this html
<div class="header">
<h1>Example title</h1>
</div>
Then use #media breakpoint to give each browser view size a differtent css.
/* first, give a default font-size (for a view less then 768px) */
.header h1 {
font-size: 20px;
}
/* from 768px upwards */
#media (min-width: 768px) {
.header h1 {
font-size: 24px;
}
}
/* from 992px upwards */
#media (min-width: 992px) {
.header h1 {
font-size: 28px;
}
}
/* from 1200px upwards */
#media (min-width: 1200px) {
.header h1 {
font-size: 36px;
}
}
I have a simple form with an input field. Now on a laptop screen the width of the input takes up 30% of the screen which is correct.
However, what I want to do is that if the device is 600px in width or less (mobile device) then increase the width to 60%.
The problem is that it is not changing the width in the mobile device. Seems like it is taking up only 30% on the mobile device and not 60%. I am not sure what I am doing incorretly as I am using the #media tag based on research.
<section id="marketing-email">
<form class="marketing-email-form" method="post" action="https://metis-online.com/marketing-email.php">
<div>
<label for="email"><b>Be part of our mailing list to receive exclusive promotional offers on our courses and services:</b></label><br/>
<input type="email" id="market-email" name="market-email" required placeholder="Email"/>
<button type="submit" class="marketing-btn">Send</button>
</div>
</form>
</section>
#media only screen and (max-width: 600px) {
#market-email{
width:60%;
}
}
/*--------Marketing Email-------*/
#marketing-email{
padding: 1em;
width:100%;
text-align:center;
}
#market-email{
padding: 0.5em;
width:30%;
}
.marketing-btn{
background: #1034A6;
color:white;
padding: 0.5em;
}
The reason why the width didn't increase to 60% on mobile device is because in your css code your first say that #market-email should have a width of 60% and just after, you reset it to 30%.
Here is how it should be done to work correctly:
#marketing-email{
padding: 1em;
width:100%;
text-align:center;
}
#market-email{
padding: 0.5em;
width:30%;
}
.marketing-btn{
background: #1034A6;
color:white;
padding: 0.5em;
}
#media only screen and (max-width: 600px) {
#market-email{
width:60%;
}
}
Just move #media only screen and (max-width: 600px) part to the end of the page. Because now the second code #market-email with width:30%; rewriting your #media rule.
In CSS, styles which come later in the document override earlier ones. Therefore the most specific #media query must always come last in the document.
At the moment, width: 30%; is applied to all screen sizes and comes later in the document, therefore overriding the earlier style of width: 60%;.
The solution is simply to change the position of the #media query within your CSS:
#marketing-email {
padding: 1em;
width: 100%;
text-align: center;
}
#market-email {
padding: 0.5em;
width: 30%;
}
.marketing-btn {
background: #1034A6;
color: white;
padding: 0.5em;
}
/* Media query comes after other styles */
#media only screen and (max-width: 600px) {
#market-email {
width: 60%;
}
}
<style>
* {
box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
width: 50%;
left: 50%;
margin: 5px auto;
word-break: break-all;
font-family: "Times New Roman", Times, serif;
padding: 15px;
border-radius: 15px;
height: 15%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
.floated {
float:left;
margin-right:5px;
}
hr {
border: none;
height: 1px;
/* Set the hr color */
color: #333; /* old IE */
background-color: #333; /* Modern Browsers */
}
</style>
This is the css code for columns, inside these columns i have some icons and text displayed, it may look perfect on my screen, but look ruined on a laptop screen, what can i do to make it look good on every screen? I'm using % instead of px so it should set the height depending on the size of the screen?
HTML code for a column below;
<div class="row">
<div class="column" style="background-color:#edeeef;">
<body>
<p style="float:left; margin: 0 auto; cursor:pointer; border-radius: 50%;" onclick="location='http://localhost/badges.php?wear=<?php echo $b_id; ?>'"><?php echo $userbadge; ?></p>
<p style="float:left; margin: 15px 20px; font-size:19px; cursor:pointer; color:black" align="center"><?php echo $badgedesc; ?></p><p></p>
</body>
</div>
Use #media screen and (min-width:1000px){} with whatever dimensions suits you best, put alternate css inside the brackets of this query to set the styling for screen sizes that comply with the declaration.
e.g. any style put in this query will only apply to screen wider that 1000px
use developer tools to see at what widths you want to adjust the styling.
edit: You can also change the rule to 'max-width' if that helps, try researching css3 media queries to develop your own understanding fully
You can use media queries
Media queries are a popular technique for delivering a tailored style
sheet to different devices.
// Small devices (landscape phones, 576px and up)
#media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
#media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) { ... }
or you can use bootstrap grid system and add pre defined classes to your elements
Bootstrap’s grid system uses a series of containers, rows, and columns
to layout and align content. It’s built with flexbox and is fully
responsive.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
I have this HTML and CSS code for a webpage. I am trying to make the website mobile-friendly and resizes itself with the size of screen viewed. I want the margins to become very small when viewed on a narrow screen like a smartphone and readjusts itself gradually when the screen is bigger and margins become larger and larger until it is a full screen of, say, a desktop computer. However, this code isn't really working. (I didn't include all the other CSS parts of this code, but please ask for it if needed!)
My attempt to resize margins due to the width of the screen:
#media (max-width: 1100px, min-width: 800px) {
body {
margin-right: 20px;
margin-left: 20px;
}
#media (max-width: 750px, min-width: 501) {
body {
margin-right: 5vw;
margin-left: 5vw;
}
}
#media (max-width: 500px) {
body {
margin-right: 2vw;
margin-left: 2vw;
}
}
</style>
</head>
<body>
<header>
<h1>Blog</h1>
<ul> <!-- Menu Tabs -->
<li>Home</li>
<li>Art</li>
<li>Music</li>
</ul>
</header>
</body>
Thanks, I would really appreciate your help!
You are missing a closing brace around your first media query. Also, you have some extra bits in your media queries making them invalid. The way media queries work makes the min-width parts you were trying to add unnecessary. The following code, at large screens, creates a 20px left/right margin. When the threshold of 750px is hit, 5vw kicks in, and so on.
/* Invalid:
#media (max-width: 1100px, min-width: 800px)
*/
#media (max-width: 1100px) {
body {
margin-right: 20px;
margin-left: 20px;
}
}
#media (max-width: 750px) {
body {
margin-right: 5vw;
margin-left: 5vw;
}
}
#media (max-width: 500px) {
body {
margin-right: 2vw;
margin-left: 2vw;
}
}
If your intention is to start with a default 20px right/left margin, for screens even larger than 1100px, you could create a default margin in your CSS which will be overridden by your media query rules. Then, you can begin your media queries at a narrower screen size.
/* default size */
body {
margin-left: 20px;
margin-rights: 20px;
}
#media (max-width: 750px) {
body {
margin-right: 5vw;
margin-left: 5vw;
}
}
#media (max-width: 500px) {
body {
margin-right: 2vw;
margin-left: 2vw;
}
}
https://jsfiddle.net/5vez3rdc/