I have a website running on desktop very well.
But when I resize it to mobile resolution it going crazy. And I want to make another new html file(it's whole different design) and make it for only specific resulotions.
But I have stuck with the question how do i do that?.
I make research and found some answers to help me but couldn't figure it out.
I tried hiding the body when they run website on mobile with
#media only screen
and (max-device-width : 667px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2)
{
#body-mobile{
display: inline-block;
}
#body-pc{
display: none;
}
}
but there is a mistake that i cant create 2 bodies on same html.
So is there any way to make another html or any another way to do it?
You can do it like this:
.desktop_container {
display: block;
}
.mobile_container {
display: none;
}
#media only screen and (max-width: 667px) {
.desktop_container {
display: none;
}
.mobile_container {
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="styles.css" />
<script type="module" src="script.js"></script>
</head>
<body>
<div class="desktop_container">
<div>Desktop</div>
<!-- PUT ALL DESKTOP CONTENT HERE -->
</div>
<div class="mobile_container">
<div>Mobile</div>
<!-- PUT ALL MOBILE CONTENT HERE -->
</div>
</body>
</html>
Instead of having two <body>, you can have <body><div id="body-mobile"></div><div id="body-pc"></div>.
Usually all you want to check is max-width:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="body-mobile">...</div>
<div id="body-pc">...</div>
</body>
</html>
I would suggest using e.g. Bootstrap CSS framework for easier responsive integration:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<div class="d-block d-sm-none">...</div>
<div class="d-lg-none d-xl-block">...</div>
</body>
</html>
Related
The responsive design works in inspect elements emulator, but on a mobile device, it doesn't show the desired output.
The HTML:
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Esmaeeil enani</title>
<link rel="stylesheet" type="text/css" media="screen" href="CVStyle.css" />
<!--Online Font Awesome Call-->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous"/>
</head>
The CSS:
#media only screen and (max-width: 1290px) {
.skills .skill-item {
margin-bottom: 30px;
}
}
#media only screen and (max-width: 1024px) {
}
There is more to the code, but this is the simplified version.
this how it looks on the desktop (inspect mode)
Pic 1 Pic 2
this how it looks on a mobile device (iPhone)
on iPhone pic 1 on iPhone pic 2
It looks bad only on iPhone devices
The problem is with the .grid css rule.
You need to change height:100% to min-height:100%
Test Links.
Using Bootstrap classes, modify the div element with the id "links" so that on extra small
resolutions (<576px), each link and ad takes one whole row. It should look like this:
On small resolutions and higher (≥576px), both links should take one half of the row and the ads
should be invisible. It should look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tests</title>
<link
rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<style>
a,
div {
outline: 1px solid black;
}
</style>
</head>
<body>
<div id="links">
Aptitude tests
<div>Ads!</div>
Programming tests
<div>More ads!</div>
</div>
<article>Here you can find various tests...</article>
</body>
</html>
You are getting close with your answer. To get it to work, these are the changes you need to make to the original code in your question:
add the class row to the container that has your cols (i.e. the links div) - cols must be in a row
Add col-12 col-sm-6 to the a elements (you just had the wrong breakpoint when you said col-12 col-md-6) Ref: Bootstrap breakpoints, Bootstrap Grid Mix & Match Col classes
For the divs, add d-sm-none to hide it on small screens (Ref: Bootstrap Display property) and col-12 to show it full width on all other screens.
You can see it working here:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tests</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<style>
a, div {
outline: 1px solid black;
}
</style>
</head>
<body>
<div id="links" class="row">
Aptitude tests
<div class="d-sm-none col-12">Ads!</div>
Programming tests
<div class="d-sm-none col-12">More ads!</div>
</div>
<article>Here you can find various tests...</article>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tests</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<style>
a, div {
outline: 1px solid black;
}
#media (min-width: 576px ) {
#links {
display: flex;
flex-direction: column;
padding-right: none;
padding-left: none;
}
}
#media (max-width: 576px ) {
#links {
flex-direction: row;
}
}
</style>
</head>
<body>
<div id="links">
Aptitude tests
<div class="d-none d-md-block">Ads!</div>
Programming tests
<div class="d-none d-md-block">More ads!</div>
</div>
<article>Here you can find various tests...</article>
</body>
</html>
This is the code I got with it.
on my WordPress Website I want to display another logo on the mobile version than on the desktop version. I manage to achieve this using the following code:
#media only screen and (max-width: 981px) {
#logo {
content: url("URL OF MOBILE LOGO");
}
}
This works pretty decent but now I have big problem. The link for this logo is missing. Usually the logo should link to "/home/" However, it does not.
I tried to add the link in the header via html with the following code:
<a id="logo" href="/"><span>Return to Home Page</span></a>
This just clones the mobile logo and puts in above or below the header. But with a link :/ ...
Could you guys please help me out on this one :)
Best regards,
Marius
You can use JQuery append() to achieve this.
Final Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#media only screen and (max-width: 981px) {
.mobileLogo a:before {
content: 'MobileLogo';
display: block;
}
}
</style>
</head>
<body>
<header>
<div class="desktopLogo">DesktopLogo</div>
<!-- append mobileLogo here -->
</header>
<!-- jquery cdn -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<!-- custom script -->
<script>
$('header').append('<div class="mobileLogo"></div>');
</script>
</body>
</html>
Hi i searched it a lot but i cannot find any solution.
Actually I want to have image for every HTML section. and it should be responsive.
here is my code
<section id="portfolio">
</section>
<section class="success">
</section>
and CSS
#portfolio {
background: url(../img/STS_247650163-Web.jpg);
background-size: cover;
height:400px;
}
.success {
background: url(../img/success.jpg);
background-size: cover;
height:1100px;
}
now if I remove height the images disappear and if add them the images becomes big and ugly.
i tried.. different method but nothing is working
thank you
You have two ways to make responsive images.
Use bootstrap- .img-responsive
use custom media queries -
#media screen and (max-width: 368px) {
img.yourclass{
min-height: 150px or auto;
}
}
Better use bootstrap for your divs or section, try this -
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Image</h2>
<p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
<img class="img-responsive" src="http://placehold.it/350x150" alt="Chania" width="460" height="345">
</div>
</body>
</html>
HTML:
<!doctype html>
<html>
<head>
<title>Example Domain</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<h1>Hello World!</h1>
<h2>A few facts about the world we live in</h2>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/640px-The_Earth_seen_from_Apollo_17.jpg" />
</body>
</html>
CSS:
img {
width: 300;
}
h1 {
font-family: Georgia;
background-color: red;
}
I have saved my html and css in the same folder. My css file is named as stylesheet.css.
I am able to edit but not through my css file which means my css file and html are linked but I somehow can't seem to edit images. Somebody help me!
the issue is your units. 300 of what? You need to add a % or px or em.
img{
width:300px;
}
Fiddle with 300px
https://jsfiddle.net/jL7Lqfv8/
Are you sure your CSS is being pulled in? Check your network tab in your browser to ensure it is. Also, try giving some units to the image width:
img {
width: 300px;
}