The responsiveness displays perfectly on some mobile devices while the text overflows on other devices
This is the breakpoint I used
#media only screen and (max-width: 480px)
{
#time{
text-align: right !important;
padding-left: 30px !important;
}
}
[
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>
I am trying my popup form responsive but unsuccessfully.
Any help will be appreciated!
That's the landing page URL - yogavoga.com/2weekdiet
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
max-width: 100%;
height: 100%;
overflow: auto;
background-color: rga(0,0,0);
background-color: rgba(0,0,0,0.85);
padding-top: 65px;
}
.modal-content {
margin: 5px auto;
width: 95%;
background-color: #fefefe;
border: 1px solid #888;border-width:3px;
}
I'd like to make it responsive for mobile as well.
Tried but couldn't get the right result.
You have to use media queries to make your website responsive.
here is the list of media queries for different device sizes:
/* Extra small devices (phones, 600px and down) */
#media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
#media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
#media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
#media only screen and (min-width: 1200px) {...}
Now you have to write device-specific css in one of the above media queries.
like :
#media only screen and (min-width: 600px) {
.modal {
//add Mobile specific css for responsive design.
}
}
I have some HTML and CSS code as shown below:
https://codepen.io/aspnetgal/pen/vaoNPz
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.adv-signup {position: relative;
background-image: linear-gradient( #fff, #eff1f1);
width: 100%; height: 400px; }
.contents {position: absolute; width: 1000px;
height: 200px; background-color:#2183c2;
}
.contents .bg{
background: #ffffff url("https://s6.postimg.cc/ugw1p1pcx/sprite.png ") no-repeat left top;
margin:0;
}
.text{
font-family: "Ubuntu";
font-weight: light;
color:white;
}
.text h3{
font-weight: bold;
}
.controls
{
}
.btn
{
background: #0c5382;
color:white;
}
h3,h1{
padding: 0px;
margin: 0px !important;
}
/* Extra small devices (phones, 600px and down) */
#media only screen and (max-width: 600px) {
.adv-signup {background: red;}
}
/* Small devices (portrait tablets and large phones, 600px and up) */
#media only screen and (min-width: 600px) {
.contents {background: green;}
}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {
.contents {background: blue;}
}
/* Large devices (laptops/desktops, 992px and up) */
#media only screen and (min-width: 992px) {
.contents {background: orange;}
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
#media only screen and (min-width: 1200px) {
.contents {background: pink;}
}
<div class="adv-signup">
<div class="contents">
<div class="bg">
<h1>test</h1>
</div>
<div class="text">
<h3>Sign up for E-News</h3>
<p>Leave your email and we’ll send you regular updates on programs, events and news.</p>
</div>
<div class="controls">
<input name="adv-sign-up-email-field" id="adv-sign-up-email-field" type="text" maxlength="255" value="Enter your email" />
>
</div>
</div>
<div>
For desktop, I want the div content which has text (heading and paragraph) and controls to be displayed in single line.
For tablet, I want the div content which has text (heading/paragragh vertically aligned) and controls to be displayed in a single line.
I want for a mobile the div content which has text heading, paragraph, and controls to be displayed in a vertical line.
backing Anji Response, you should write all your CSS under media queries. Below is the list of queries that you should minimum follow.
Min-width: 320px (smaller phone viewpoints)
Min-width: 480px (small devices and most phones)
Min-width: 768px (most tablets)
Min-width: 992px (smaller desktop viewpoints)
Min-width: 1200px (large devices and wide screens)
Note:- Setting with JS is anyway a costly JOB!!!
Updated js fiddle. https://codepen.io/anon/pen/BPXbjx
you need to add the below code.
.contents{
display:flex;
}
#media (max-width:767px){
.contents{
display:block;
}
}
I hope you can do the remaining styles.
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/
I am trying to make a certain page on our website mobile-friendly by hiding two large divs that aren't supposed to display as they are a) interactive and feature hover effects, and b) break up the flow of the page.
Currently testing on my LG G2 in Chrome, using
#media only screen and (max-width : 768px) {
div.example {
display: none !important;
visibility: hidden;
}
}
However it has no effect at all.
The CSS for "example" is:
div.example {
background-image: url('http://www.example.com/example.jpg'); border: 3px solid #ecf0f1;
height: 941px;
width: 1209px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
}
What am I doing wrong? As you can see by the dimensions they are too big for a standard mobile device... the page looks perfect on iPad & desktop resolutions, and even the forced requested desktop site version displays fine in mobile.
Any help appreciated, cheers.
Resolution of LG G2 is 1080 x 1920, which is larger than max-width: 768px. Your media query failed. Use:
#media only screen and (max-width : 1080px) {
}
for portrait orientation of the device. Even better, you can make use of: -webkit-device-pixel-ratio to target devices with different pixel ratio.
FYI, LG G2 has webkit-device-pixel-ratio: 3 (see Reference)
Update: Here is a general media query for high pixel ratio devices:
https://gist.github.com/marcedwards/3446599
<!doctype html>
<html>
<head>
<style>
#media only screen and (max-width : 768px) { div.example { display: none; } }
div.example {
background-image: url('http://scholarship-positions.com/internships/wp-content/uploads/2014/12/google.jpg');
background-repeat: no-repeat;
border: 3px solid #ecf0f1;
height: 941px;
width: 1209px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
}
</style>
</head>
<body>
<div class="example"></div>
</body>
</html>