Я вставил логотип в заголовок этой страницы, используя HTML.В настольных компьютерах Chrome и Safari он отлично смотрится, но не на мобильных телефонах.
Я не создавал этот веб-сайт, но вижу другой код CSS, используемый для мобильных и настольных компьютеров.
Может кто-нибудь помочь мне выяснить, как я вижу изображение, вставленное рядом с заголовком, лучше на телефонах пожалуйста?Я загрузил фрагмент мобильного CSS и две фотографии мобильного и рабочего стола.
Я хочу знать, как добавить это изображение в логотип на всех страницах.Я не знаю, как добавить изображение в CSS.
Первый фрагмент - это мобильный CSS и сам HTML.http://ventricular.org/TheVentricularFoundation/Mentorship.html
/*
Linear by TEMPLATED
templated.co @templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
*/
/*********************************************************************************/
/* Basic */
/*********************************************************************************/
body,input,textarea,select
{
line-height: 1.75em;
font-size: 10.5pt;
letter-spacing: 0;
}
body
{
padding-top: 44px;
}
h2, h3, h4, h5, h6
{
line-height: 1em;
font-size: 1.5em;
}
section,
article
{
clear: both;
margin: 2em 0 2em 0 !important;
}
section > :first-child,
article > :first-child
{
margin-top: 0 !important;
}
section:first-child,
article:first-child
{
margin-top: 0 !important;
}
.container
{
padding: 0em 1em;
}
hr
{
margin: 3em 0 0 0;
padding: 3em 0 0 0;
}
header
{
margin-bottom: 1.6em;
}
header h2
{
font-size: 2em;
}
header .byline
{
font-size: 1.2em;
}
.button
{
display: block;
width: 100%;
text-align: center;
}
/*********************************************************************************/
/* UI */
/*********************************************************************************/
#titleBar
{
background: #161616;
}
#titleBar .title a
{
display: block;
color: #fff;
text-align: center;
line-height: 44px;
font-weight: 300;
text-decoration: none;
}
#titleBar .tag
{
display: none;
}
#titleBar .toggle
{
position: absolute;
left: 0;
top: 0;
width: 80px;
height: 60px;
}
#titleBar .toggle:after
{
content: '';
display: block;
width: 20px;
height: 12px;
position: absolute;
left: 10px;
top: 15px;
background: url('images/toggle.svg') 0px 0px no-repeat;
opacity: 0.5;
}
#titleBar .toggle:active:after
{
opacity: 0.75;
}
#navPanel
{
background: #1f1f1f;
}
#navPanel .link
{
display: block;
color: #888;
text-decoration: none;
height: 44px;
line-height: 44px;
border-top: solid 1px;
border-color: rgba(255,255,255,.05);
padding: 0 1em 0 1em;
letter-spacing: 1px;
}
#navPanel .link:first-child
{
border-top: 0;
}
#navPanel .link.depth-0
{
color: #fff;
}
#navPanel .indent-1 { display: inline-block; width: 1em; }
#navPanel .indent-2 { display: inline-block; width: 2em; }
#navPanel .indent-3 { display: inline-block; width: 3em; }
#navPanel .indent-4 { display: inline-block; width: 4em; }
#navPanel .indent-5 { display: inline-block; width: 5em; }
#navPanel .depth-0 { color: #fff; }
/*********************************************************************************/
/* Header */
/*********************************************************************************/
#header
{
height: 10em;
padding: 0;
background-position: center center;
background-attachment: scroll;
}
/*********************************************************************************/
/* Logo */
/*********************************************************************************/
#logo
{
display: none;
}
#nav
{
display: none;
}
/*********************************************************************************/
/* Main */
/*********************************************************************************/
#main
{
padding: 4em 0em 2em 0em;
}
.homepage #content header h2
{
padding: 0.70em 0em;
font-size: 1.4em;
}
#sidebar h2
{
font-size: 1.8em;
}
<!DOCTYPE HTML>
<!--
Linear by TEMPLATED
templated.co @templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>The Ventricular Foundation</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,700,500,900' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-panels.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel-noscript.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-desktop.css" />
</noscript>
<!-- Begin Google Analytics code -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-69792706-1', 'auto');
ga('send', 'pageview');
</script>
<!-- End Analytics code -->
</head>
<body class="homepage">
<!-- Header -->
<div id="header">
<div id="nav-wrapper">
<!-- Nav -->
<nav id="nav">
<ul>
<li class="active"><a href="The Ventricular Foundation.html">Home</a></li>
<li><a href="Who are we.html">Who are we?</a></li>
<li><a href="What we do.html">What do we do?</a></li>
<li><a href="Teaching.html">Teaching</a></li>
<li><a href="Mentorship.html">Mentorship</a></li>
<li><a href="Fellowships.html">Fellowships</a></li>
<li><a href="Become a member.html">DONATE!</a></li>
<li><a href="http://ventricular.org/">Ventricular.org</a></li>
</ul>
</nav>
</div>
<div class="container">
<!-- Logo -->
<div id="logo">
<h1><a href="#"> <img src= "/TheVentricularFoundation/Images/Official Logo Square.jpg" height="250" width="210" style="float:left;"/> <style="float:right;">The Ventricular Foundation</a></h1>
<span class="tag"></span>
</div>
</div>
</div>
<!-- Header -->
Вот как это выглядит с помощью мобильного телефона
Вот так выглядит на рабочем столе: