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>
Related
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>
So I new to html and want to make a website with 2 pages a home page and a contact page.
and I just want to know how do you use the same Style.css file for then 1 page?
Do just write in the Style.css:
***#Home body;
#Contact body;***
For ease of explaining, i have created 2 divs in one page. But you can create homepage and put "homepage" div in it and "contact" div on another page
.homepage {
/* All css needed for homepage will come here */
}
.contact {
/* All css needed for contact will come here */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="homepage">
page 1 content
</div>
<div class="contact">
contact content
</div>
</body>
</html>
I am creating a website in Django. I downloaded a html homepage template design on the internet that I want to improve upon and use for my website. since its been designed it came with a CSS file. now when I try to make the improvements specifically add a background image in one of the elements. it refuses to do so. the other elements respond to the CSS style but the background image refuses too. since I'm using Django i had to set up the static files and 'collect static' which I did but when I set that those pics to my background image in my CSS it refuses. here is the html file & css.
html
<!DOCTYPE html>
<!-- Created by CodingLab |www.youtube.com/c/CodingLabYT-->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title> Home </title>
<link rel="stylesheet" href="{% static 'style.css' %}">
<!-- Boxicons CDN Link -->
<link href=
'https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css'
rel='stylesheet'>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
</head>
<section class="home-section">
<div class="main" >
</div>
the class="main" is where I'm trying to add the background-image too.
CSS
.home-section .main{
background-image: url('https://www.pexels.com/photo/singer-
singing-on-stage-beside-guitar-player-and-bass-player-
167636/');
padding: auto;
margin: auto;
background-size: 50pc;
}
#media (max-width: 700px) {
.sidebar li .tooltip{
display: none;
}
}
I've tried everything but it refuses to acquis. Thanks in advance.
Load Static or have non-empty div
Without knowing what more code you have I can only guess that perhaps you forgot to load static files by including this on the top of your html file:
{% load static %}
Second, until the div is filled with something, it has no dimensions, so the image would occupy no space either.
I am putting a Formidable Form on an html page by using an <iframe>, but I'd like it to be full screen on a mobile device. So far I'm using the following code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
#import url(http://fonts.googleapis.com/css?family=Londrina+Sketch);
body {
background-color: #f3eedd;
width: 750px;
overflow:scroll;
overflow-x:hidden;
}
h2 {
font-size: 20px;
color: #c13e18;
margin: 10px 30px 10px 30px;
}
</style>
</head>
<body>
<div id="header">
<h2>Book Supheroes Unite</h2>
</div>
<div id="form">
<iframe src="http://challenge-the-box.com/wp-admin/admin-ajax.php?action=frm_forms_preview&form=sbyrt02
" frameborder="0" scrolling="no" style="width:280px;height:535px;"></iframe></div>
</html>
I believe it has something to do with viewports? However, I'm not entirely sure on this!
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This meta tag allows you to target mobile devices and sets the width to the screen size.
Documentation provided here!
Also consider migrating to bootstrap a CSS framework for Responsive web design! Twitter Bootstrap
Personally I would use a library like bootstrap to acheive this adding something like this to your head.
<meta name="viewport" content="width=device-width, initial-scale=1">
Bootstrap allows you to create dynamic grids with your content regardless of the device size. You simply create divs inside a larger container for example the fluid container:
<div class="container-fluid">
<div class="row">
...
</div>
</div>
You can use the media queries !
looks like this:
#media (max-width: 640px) {
//your css to make it full screen
}
I have worked with Bootstrap many times, and have only seen this issue when my meta viewport tag is missing. However, that is loaded, and I am still experiencing issues with Bootstrap on mobile devices. Might anyone know what else could be causing this?
Issues:
button routes showing
styles not displaying properly
CSS showing in view
mobile nav missing
formatting/alignment is off
Head:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Training Portal</title>
<!-- bootstrap/jquery -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<!-- custom stylesheet -->
<link href="<?= base_url("stylesheets/cust.css"); ?>" rel="stylesheet" type="text/css" media="screen">
</head>
Scripts at end of <body>:
<!-- scripts -->
<script src="http://code.jquery.com/jquery.js"></script>
<script src="<?= base_url("assets/script.js"); ?>"></script>
<!-- Bootstrap JavaScript -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
Viewport data also added to CSS:
#viewport{
zoom: 1.0;
width: extend-to-zoom;
}
Example of issue on mobile:
What this looks like on desktop:
It appears to be a PHP error, and judging by the lack of CSS, I'm going to take a stab and say that maybe the PHP short tags (<?= and <?) are not enabled?
I see "undefined index: session-course" in the messages returned from PHP, in templates/dashboard.php. While it is only a notice, it is probably corrupting the CSS so the browser can't render it.