I have a footer on this site that I'm building and have set it so that it appears just under the content of my website. When I have some paragraphs or photos linked on a page this footer appears just below the content (as I would like it to), but when I try to use photos in a slider, the footer doesn't appear under this slider, rather it overlaps the photos.
I would like to set the footer so that it appears just below the photo slider (not too far down the page) as it does on other pages. Any advice on how to format the footer properly would be much appreciated.
Current Footer Position
Desiered Design
Below is my code.
<!DOCTYPE html>
<html lang="en; jp;">
<body style="background-color: white;">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="page-wrap">
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox"/>
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: .05px solid lightgray;">ホーム</li>
<li style="border-bottom: .05px solid lightgray;">ブログ</li>
<li style="border-bottom: .05px solid lightgray;">小泉ついて</li>
<li style="border-bottom: .05px solid lightgray;">参考文献</li>
<div class="searchbar">
<form id="frmSearch" class="search2" method="get" action="default.html" style=" padding-right: 20px; padding-top: 20px; text-align: right; position: inline;"/>
<input class="search2" id="txtSearch" type="text" name="serach_bar" size="31" maxlength="255" value="" style="center: 396px; top: 185px; width: 180px; height: 26px;"/>
<input class="search1" type="submit" name="submition" value="検索" style=" padding-
bottom:20px; left: 0px; top: 153px; height: 25px; width: 32px;"/>
<input class="search2" type="hidden" name="sitesearch" value="default.html"/>
<script type="text/javascript">
document.getElementById('frmSearch').onsubmit = function() {
window.location = 'http://www.google.com/search?q=site:yoursitename.com ' + document.getElementById('txtSearch').value;
return false;
}
document.getElementById('cp_toggle03').onchange = function() {
if (document.getElementById('cp_toggle03').checked) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
}
</script>
</div>
</ul>
</nav>
</header>
<div class="setsumei">
<br><h1 style="text-align: center; font-size: 40px;">◯◯◯◯</h1>
<br><p style="text-align: justify; font-size: 16px;"></p>
<p style="text-align: center; font-size: 13px;">著者：◯◯◯◯</p>
<p style="text-align: center; font-size: 13px;">撮影日：◯◯◯◯年◯◯月◯◯日</p>
<br><ul class="slider_fade">
<li><img src="photos/Home_Page/geiko.JPG" width="85%"></li>
<li><img src="photos/Home_Page/Kongoji_homepage.jpg" alt="Kongoji_homepage.jpg" width="85%"></li>
<li><img src="photos/Home_Page/fuji.JPG" width="85%"></li>
</ul>
</div>
</div>
<br><br><footer class="site-footer" style="font-size: 12px;">小泉© 2020年 | English</footer>
</div>
<style>
.searchbar{float: right;}
.image{text-align: center;}
.setsumei{margin-left: 20px;
margin-right: 20px;}
.footer{width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: inherit;
bottom: 0;
padding: 10px;}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 40px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
.slider_fade {
text-align: center;
position: relative;
z-index: 1;
}
.slider_fade > li {
position: absolute;
list-style: none;
visibility: hidden;
animation: anime_slider_fade 25s 0s infinite;
}
.slider_fade > li:nth-of-type(2) {
animation-delay: 6s;
}
.slider_fade > li:nth-of-type(3) {
animation-delay: 15s;
}
#keyframes anime_slider_fade {
0% {
visibility: visible;
opacity: 0;
}
15% {
opacity: 1;
}
33.3% {
opacity: 1;
}
48.3% {
opacity: 0;
}
100% {
opacity: 0;
}
}
*, *:before, *:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1050px)and (min-width: 480px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon > span:before,
.cp_menuicon > span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon > span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked + .cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked + .cp_mobilebar span:before,
#cp_toggle03:checked + .cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked ~ #h-menu_black {
display: block;/*カバーを表示*/
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll{
overflow: hidden;
position: fixed;
}
</style>
</body>
</html>
I added a few photos from my side to test what was the problem I figured it out and fixed the footer. Now, it is fixed to bottom of the page. Here, take a look
<!DOCTYPE html>
<html lang="en; jp;">
<body style="background-color: white">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<div class="page-wrap">
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox" />
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul
style="text-align: center; margin-left: 210px; overflow: hidden"
>
<li style="border-bottom: 0.05px solid lightgray">
ホーム
</li>
<li style="border-bottom: 0.05px solid lightgray">
ブログ
</li>
<li style="border-bottom: 0.05px solid lightgray">
小泉ついて
</li>
<li style="border-bottom: 0.05px solid lightgray">
参考文献
</li>
<div class="searchbar">
<form
id="frmSearch"
class="search2"
method="get"
action="default.html"
style="
padding-right: 20px;
padding-top: 20px;
text-align: right;
position: inline;
"
/>
<input
class="search2"
id="txtSearch"
type="text"
name="serach_bar"
size="31"
maxlength="255"
value=""
style="center: 396px; top: 185px; width: 180px; height: 26px"
/>
<input
class="search1"
type="submit"
name="submition"
value="検索"
style="
padding-bottom: 20px;
left: 0px;
top: 153px;
height: 25px;
width: 32px;
"
/>
<input
class="search2"
type="hidden"
name="sitesearch"
value="default.html"
/>
<script type="text/javascript">
document.getElementById("frmSearch").onsubmit = function () {
window.location =
"http://www.google.com/search?q=site:yoursitename.com " +
document.getElementById("txtSearch").value;
return false;
};
document.getElementById("cp_toggle03").onchange =
function () {
if (document.getElementById("cp_toggle03").checked) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
};
</script>
</div>
</ul>
</nav>
</header>
<div class="setsumei">
<br />
<h1 style="text-align: center; font-size: 40px">◯◯◯◯</h1>
<br />
<p style="text-align: justify; font-size: 16px"></p>
<p style="text-align: center; font-size: 13px">著者：◯◯◯◯</p>
<p style="text-align: center; font-size: 13px">
撮影日：◯◯◯◯年◯◯月◯◯日
</p>
<br />
<ul class="slider_fade">
<li><img src="photos/Home_Page/geiko.JPG" width="85%"></li>
<li><img src="photos/Home_Page/Kongoji_homepage.jpg" alt="Kongoji_homepage.jpg" width="85%"></li>
<li><img src="photos/Home_Page/fuji.JPG" width="85%"></li>
</ul>
</div>
</div>
<br /><br />
<footer class="site-footer" style="font-size: 12px">
小泉© 2020年 | English
</footer>
</div>
<style>
.searchbar {
float: right;
}
.image {
text-align: center;
}
.setsumei {
margin-left: 20px;
margin-right: 20px;
}
.footer {
width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: inherit;
bottom: 0;
padding: 10px;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
/* .push must be the same height as footer */
height: 40px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
bottom: 0px;
left: 0px;
right: 0px;
margin-bottom: 0px;
position: fixed;
width: 100%;
height: 50px;
margin-top: -50px;
z-index: 10;
background-color: white;
}
.slider_fade {
text-align: center;
position: relative;
z-index: 1;
}
.slider_fade > li {
position: absolute;
list-style: none;
visibility: hidden;
animation: anime_slider_fade 25s 0s infinite;
}
.slider_fade > li:nth-of-type(2) {
animation-delay: 6s;
}
.slider_fade > li:nth-of-type(3) {
animation-delay: 15s;
}
#keyframes anime_slider_fade {
0% {
visibility: visible;
opacity: 0;
}
15% {
opacity: 1;
}
33.3% {
opacity: 1;
}
48.3% {
opacity: 0;
}
100% {
opacity: 0;
}
}
*,
*:before,
*:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol,
ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color 0.3s ease-in;
transition: background-color 0.3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
img {
height: 80vh;
width: 100%;
object-fit: scale-down;
margin-bottom: 100px;
}
#media (max-width: 1050px) and (min-width: 480px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;
}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: 0.05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
}
.cp_menuicon > span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform 0.3s ease;
transition: transform 0.3s ease;
}
.cp_menuicon > span:before,
.cp_menuicon > span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
}
.cp_menuicon > span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon > span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked + .cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked + .cp_mobilebar span:before,
#cp_toggle03:checked + .cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked ~ #h-menu_black {
display: block; /*カバーを表示*/
opacity: 0.6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: 0.7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll {
overflow: hidden;
position: fixed;
}
}
</style>
</body>
</html>
<!DOCTYPE html>
<html lang="en; jp;">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<style>
footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
bottom: 0px;
left: 0px;
right: 0px;
margin-bottom: 0px;
position: fixed;
width: 100%;
height: 50px;
margin-top: -50px;
z-index: 10;
background-color: white;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.searchbar{float: right;}
.image{text-align: center;}
.setsumei{margin-left: 20px;
margin-right: 20px;}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.slider_fade {
text-align: center;
position: relative;
z-index: 1;
}
.slider_fade > li {
position: absolute;
list-style: none;
visibility: hidden;
animation: anime_slider_fade 25s 0s infinite;
}
.slider_fade > li:nth-of-type(2) {
animation-delay: 6s;
}
.slider_fade > li:nth-of-type(3) {
animation-delay: 15s;
}
#keyframes anime_slider_fade {
0% {
visibility: visible;
opacity: 0;
}
15% {
opacity: 1;
}
33.3% {
opacity: 1;
}
48.3% {
opacity: 0;
}
100% {
opacity: 0;
}
}
*, *:before, *:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1050px)and (min-width: 480px) {
/* menu */
.cp_offcm03 {
position: relative;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon > span:before,
.cp_menuicon > span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon > span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked + .cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked + .cp_mobilebar span:before,
#cp_toggle03:checked + .cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked ~ #h-menu_black {
display: block;/*カバーを表示*/
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll{
overflow: hidden;
position: rel;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6" s>
<div style="background-color: white;">
<div class="page-wrap">
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox"/>
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center;">
<li style="border-bottom: .05px solid lightgray;">ホーム</li>
<li style="border-bottom: .05px solid lightgray;">ブログ</li>
<li style="border-bottom: .05px solid lightgray;">小泉ついて</li>
<li style="border-bottom: .05px solid lightgray;">参考文献</li>
<div class="searchbar">
<form id="frmSearch" class="search2" method="get" action="default.html" style=" padding-right: 20px; padding-top: 20px; text-align: right; position: inline;"/>
<input class="search2" id="txtSearch" type="text" name="serach_bar" size="31" maxlength="255" value="" style="center: 396px; top: 185px; width: 180px; height: 26px;"/>
<input class="search1" type="submit" name="submition" value="検索" style=" padding-
bottom:20px; left: 0px; top: 153px; height: 25px; width: 32px;"/>
<input class="search2" type="hidden" name="sitesearch" value="default.html"/>
</div>
</ul>
</nav>
</header>
<div class="setsumei">
<br><h1 style="text-align: center; font-size: 40px;">◯◯◯◯</h1>
<br><p style="text-align: justify; font-size: 16px;"></p>
<p style="text-align: center; font-size: 13px;">著者：◯◯◯◯</p>
<p style="text-align: center; font-size: 13px;">撮影日：◯◯◯◯年◯◯月◯◯日</p>
<br>
<div class="center">
<ul class="slider_fade">
<li><a><img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Kongoji_homepage.jpg" width="85%"></a></li>
<li><img src="https://www.w3schools.com/howto/img_forest.jpg" width="85%"></li>
<li><img src="https://www.w3schools.com/img_forest.jpg" width="85%"></li>
<li><img src="https://www.w3schools.com/howto/img_mountains.jpg" width="85%"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer style="font-size: 12px;">
<p>小泉© 2020年 |</p>English
</footer>
</body>
</html>
<script type="text/javascript">
document.getElementById('frmSearch').onsubmit = function() {
window.location = 'http://www.google.com/search?q=site:yoursitename.com ' + document.getElementById('txtSearch').value;
return false;
}
document.getElementById('cp_toggle03').onchange = function() {
if (document.getElementById('cp_toggle03').checked) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
}
</script>
Related
Listed below is the code that I'm using to build a website. I've gotten this to display the way that I'd like it to on a computer (I'm currently using a Macbook), and when I scale it down and view it as it may look on a smartphone on my computer there are no issues. However, when I try to view one of the web pages on my iPhone 12 pro, the word "search" on the button on my search bar doesn't display properly. I'd like the word "search" to be centered in the middle of the button, but no matter what I try the word "search" remains on the right side of the button slightly cut off. I've tried the tag "text-align: center;" and a few other solutions that I've found on the web, but none of them work. I've made the search bar using javascript.
Does anyone have any ideas of how I can get the word "search" to display in the middle of the search button?
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0;" charset="utf-8">
<body style="background-color: white; font-family: sans-serif;">
<title>#</title>
<div class="page-wrap">
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox"/>
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: .05px solid lightgray;">Home</li>
<li style="border-bottom: .05px solid lightgray;">Blog</li>
<li style="border-bottom: .05px solid lightgray;">About Koizumi</li>
<li style="border-bottom: .05px solid lightgray;">Bibliography</li>
<div class="searchbar">
<form id="frmSearch" class="search2" method="get" action="default.html" style=" padding-right: 10px; padding-top: 20px; text-align: right; position: inline;"/>
<input class="search2" id="txtSearch" type="text" name="serach_bar" size="31" maxlength="255" value="" style="center: 396px; top: 185px; width: 180px; height: 26px;"/>
<input class="search1" type="submit" name="submition" value="Search" style=" padding-
bottom:20px; left: 0px; top: 153px; height: 25px; width: 46px;"/>
<input class="search2" type="hidden" name="sitesearch" value="default.html"/>
<script type="text/javascript">
document.getElementById('frmSearch').onsubmit = function() {
window.location = 'http://www.google.com/search?q=site:yoursitename.com ' + document.getElementById('txtSearch').value;
return false;
}
document.getElementById('cp_toggle03').onchange = function() {
if (document.getElementById('cp_toggle03').checked) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
}
if(!!window.performance && window.performance.navigation.type == 2)
{
window.location.reload();
}
</script>
</div>
</ul>
</nav>
</header>
<div class="setsumei">
<br><h1 style="text-align: center; font-size: 40px;">◯◯◯◯</h1>
<br><p style="text-align: justify; font-size: 16px;"></p>
<p style="text-align: center; font-size: 13px;">Author: ◯◯◯◯</p>
<p style="text-align: center; font-size: 13px;">Photos/Videos Taken：◯◯◯◯/◯◯/◯◯</p>
<br><p style="text-align: justify; font-size: 16px;">
#
</p>
</div>
<br><div class="image">
<img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
</div>
<br><br><footer class="site-footer" style="font-size: 12px;">小泉© | 日本語</footer>
</div>
</div>
<style>
.searchbar{float: right;}
.image{text-align: center;}
.setsumei{margin-left: 20px;
margin-right: 20px;}
.footer{width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 20px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*, *:before, *:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon > span:before,
.cp_menuicon > span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon > span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked + .cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked + .cp_mobilebar span:before,
#cp_toggle03:checked + .cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked ~ #h-menu_black {
display: block;/*カバーを表示*/
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll{
overflow: hidden;
position: fixed;
}
</style>
</body>
</html>
first next time I would suggest you try to short down your code so that we can find the snippet of code easily :)
Anyway after reading the code try changing the style property text-align of the form tag to center instead of right.
<form id="frmSearch" class="search2" method="get" action="default.html" style=" padding-right: 10px; padding-top: 20px; text-align: center; position: inline;"/>
As I said, it is pretty difficult to guess something out of the whole page but try that...
The HTML, CSS, and JAVASCRIPT all work as I would like them to. That is until I return to the same page after pressing the back arrow on my browser (I'm currently using Google chrome). For example: when I have the menu bar open on the smartphone browser it stays in one position on the screen as I'd like it to. However, if I return to that page with the menu bar open, the top portion (where the X button is) moves up the screen if I scroll down.
Can you help me fix it so that the code I'm using stays exactly the same even after I go back to the same page after using the back and forward button on my browser?
<!DOCTYPE html>
<html lang="en; jp;">
<body style="background-color: white; font-family: sans-serif;">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Koizumi・Home Page</title>
<div class="page-wrap">
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox"/>
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: .05px solid lightgray;">Home</li>
<li style="border-bottom: .05px solid lightgray;">Blog</li>
<li style="border-bottom: .05px solid lightgray;">About Koizumi</li>
<li style="border-bottom: .05px solid lightgray;">Bibliography</li>
<div class="searchbar">
<form id="frmSearch" class="search2" method="get" action="default.html" style=" padding-right: 10px; padding-top: 20px; text-align: right; position: inline;"/>
<input class="search2" id="txtSearch" type="text" name="serach_bar" size="31" maxlength="255" value="" style="center: 396px; top: 185px; width: 180px; height: 26px;"/>
<input class="search1" type="submit" name="submition" value="Search" style=" padding-
bottom:20px; left: 0px; top: 153px; height: 25px; width: 46px;"/>
<input class="search2" type="hidden" name="sitesearch" value="default.html"/>
</div>
<script type="text/javascript">
document.getElementById('frmSearch').onsubmit = function() {
window.location = 'http://www.google.com/search?q=site:yoursitename.com ' + document.getElementById('txtSearch').value;
return false;
}
document.getElementById('cp_toggle03').onchange = function() {
if (document.getElementById('cp_toggle03').checked) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
}
</script>
</ul>
</nav>
</header>
</div>
</div>
<br><br><div class="image" style="margin: 10px;">
<img src="photos/Home_Page/Travel/Homepage_Travel_English.jpg" alt="Travel" width="85%">
<div class=" responsive-image-container"><img src="photos/Home_Page/Yokai/Homepage_yokai_English.jpg" alt="Yokai" width="42.4%"> <img src="photos/Home_Page/Kongoji/Kongoji_homepage_English.jpg" alt="Kongoji" width="42.4%">
</div>
<div class=" responsive-image-container"><img src="photos/Home_Page/Tamagawa_Onsen/Homepage_Tamagawa_Onsen_English.jpg" alt="Tamagawa_Onsen" width="42.4%"> <img src="photos/Home_Page/About_Koizumi/Homepage_Koizumi_English.jpg" alt="Koizumi" width="42.4%">
</div>
<br><br><footer class="site-footer" style="font-size: 12px;">小泉© | 日本語</footer></div>
<style>
.searchbar{float: right;}
.image{text-align: center;}
.setsumei{margin-left: 20px;
margin-right: 20px;}
.footer{width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 30px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
#media only screen and (max-width: 1130px) and (min-width: 480px) {
.responsive-image-container{
display: flex;
flex-direction: column;
text-align: center;
}
img{width:85%;}
}
*, *:before, *:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 480px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon > span:before,
.cp_menuicon > span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon > span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked + .cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked + .cp_mobilebar span:before,
#cp_toggle03:checked + .cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked ~ #h-menu_black {
display: block;/*カバーを表示*/
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll{
overflow: hidden;
position: fixed;
}
</style>
</body>
</html>
I'm trying to set up a web page so that on a large screen two images are lined up next to one another and lined up on top of each other on a smaller screen. I've managed to do this, but for whatever reason, the images are shrinking smaller than they normally do when lined up on top of each other.
If anyone has any ideas on how to resize the images so that they're easier to see on a smaller screen, it'd be much appreciated.
Below is my code:
<!DOCTYPE html>
<html lang="en; jp;">
<body style="background-color: white;">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="page-wrap">
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox"/>
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: .05px solid lightgray;">ホーム</li>
<li style="border-bottom: .05px solid lightgray;">ブログ</li>
<li style="border-bottom: .05px solid lightgray;">小泉ついて</li>
<li style="border-bottom: .05px solid lightgray;">参考文献</li>
<div class="searchbar">
<form id="frmSearch" class="search2" method="get" action="default.html" style=" padding-right: 20px; padding-top: 20px; text-align: right; position: inline;"/>
<input class="search2" id="txtSearch" type="text" name="serach_bar" size="31" maxlength="255" value="" style="center: 396px; top: 185px; width: 180px; height: 26px;"/>
<input class="search1" type="submit" name="submition" value="検索" style=" padding-
bottom:20px; left: 0px; top: 153px; height: 25px; width: 32px;"/>
<input class="search2" type="hidden" name="sitesearch" value="default.html"/>
<script type="text/javascript">
document.getElementById('frmSearch').onsubmit = function() {
window.location = 'http://www.google.com/search?q=site:yoursitename.com ' + document.getElementById('txtSearch').value;
return false;
}
document.getElementById('cp_toggle03').onchange = function() {
if (document.getElementById('cp_toggle03').checked) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
}
</script>
</div>
</ul>
</nav>
</header>
<div class="setsumei">
</div>
<br><div class="image" style="margin: 20px;">
<div class=" responsive-image-container">
<img src="photos/Home_Page/geiko.JPG" alt="Geiko" width="45%"> <img src="photos/Home_Page/fuji.JPG" alt="Fuji" width="45%">
</div>
<br><br><footer class="site-footer" style="font-size: 12px;">小泉© 2020 | 日本語</footer></div>
</div>
<style>
.searchbar{float: right;}
.image{text-align: center;}
.setsumei{margin-left: 20px;
margin-right: 20px;}
.footer{width: 100%;
height: 20px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -20px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 40px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
#media only screen and (max-width: 1050px) and (min-width: 480px) {
.responsive-image-container{
display: flex;
flex-direction: column;
text-align: center;
}
}
*, *:before, *:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1050px) and (min-width: 480px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon > span:before,
.cp_menuicon > span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon > span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked + .cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked + .cp_mobilebar span:before,
#cp_toggle03:checked + .cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked ~ #h-menu_black {
display: block;/*カバーを表示*/
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll{
overflow: hidden;
position: fixed;
}
</style>
</body>
</html>
I have two photos on a page that I've set so that they're lined up against one another. In order to make this web page easier to navigate through on a smartphone, I'd like to have the two photos line up one on top of another when the screen size shrinks.
If anyone knows how to make photos responsive so that they're lined up one on top of another and easier to view on small-screen devices, as well as to help space the images, I'd appreciate your advice.
![How I'd like my page to look on smaller devices][1]
My (revised) code is as follows:
<!DOCTYPE html>
<html lang="en; jp;">
<body style="background-color: white;">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="page-wrap">
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox"/>
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: .05px solid lightgray;">ホーム</li>
<li style="border-bottom: .05px solid lightgray;">ブログ</li>
<li style="border-bottom: .05px solid lightgray;">小泉ついて</li>
<li style="border-bottom: .05px solid lightgray;">参考文献</li>
<div class="searchbar">
<form id="frmSearch" class="search2" method="get" action="default.html" style=" padding-right: 20px; padding-top: 20px; text-align: right; position: inline;"/>
<input class="search2" id="txtSearch" type="text" name="serach_bar" size="31" maxlength="255" value="" style="center: 396px; top: 185px; width: 180px; height: 26px;"/>
<input class="search1" type="submit" name="submition" value="検索" style=" padding-
bottom:20px; left: 0px; top: 153px; height: 25px; width: 32px;"/>
<input class="search2" type="hidden" name="sitesearch" value="default.html"/>
<script type="text/javascript">
document.getElementById('frmSearch').onsubmit = function() {
window.location = 'http://www.google.com/search?q=site:yoursitename.com ' + document.getElementById('txtSearch').value;
return false;
}
document.getElementById('cp_toggle03').onchange = function() {
if (document.getElementById('cp_toggle03').checked) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
}
</script>
</div>
</ul>
</nav>
</header>
<div class="setsumei">
</div>
<br><div class="image" style="margin: 10px; text-align: center;">
<div class="responsive-image-container">
<img src="photos/Home_Page/fuji.JPG" alt="Fuji" width="40%"> <img src="photos/Home_Page/Kongoji_homepage.jpg" alt="Kongoji" width="40%">
</div>
<br><br><footer class="site-footer" style="font-size: 12px;">小泉© 2020年 | English</footer>
</div>
<style>
.searchbar{float: right;}
#media only screen and (max-width: 1050px){
.responsive-image-container{
display: flex;
flex-direction: column;
}
}
.setsumei{margin-left: 20px;
margin-right: 20px;}
.footer{width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 40px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*, *:before, *:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1050px) and (min-width: 480px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon > span:before,
.cp_menuicon > span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon > span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked + .cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked + .cp_mobilebar span:before,
#cp_toggle03:checked + .cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked ~ #h-menu_black {
display: block;/*カバーを表示*/
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll{
overflow: hidden;
position: fixed;
}
</style>
</body>
</html>
[1]: https://i.stack.imgur.com/HkD6k.jpg
Images are an inline elements. It depends on how you want your layout to work, but you may not need to do anything, it may be as simple as using the proper image size and setting a max-size.
A very simple implementation of what you need:
.responsive-image-container {
text-align: center;
}
.responsive-image-container>img {
max-width: 100%;
margin: 8px;
}
<div class="responsive-image-container">
<img src="https://placeimg.com/300/200/any" alt="some image" />
<img src="https://placeimg.com/300/200/any" alt="some image" />
</div>
A simple way to have more control, for example to have the images fill the containing parent, can be achieved using flex.
.responsive-image-container {
display: flex;
flex-direction: column;
align-items: stretch;
}
#media only screen and (min-width: 960px) {
.responsive-image-container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
}
<div class="responsive-image-container">
<img src="https://placeimg.com/300/200/any" alt="some image" />
<img src="https://placeimg.com/300/200/any" alt="some image" />
</div>
I am a beginner in using HTML/CSS, but I started by editing different things to catch as little as possible. I have a problem. I was helped by a friend to create a menu, but it does not increase/shrink/center on the right side after each monitor/phone from which the site is accessed.
I don't know what to do first.
HTML
<!-- /Main navigation -->
</div>
</nav>
<div class="home-wrapper">
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="home-content">
<h1 class="white-text"><b>Adrian Vichiriuc</b></h1>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- /Header -->
<!-- Back to top -->
<div id="back-to-top"></div>
<!-- /Back to top -->
<!-- Preloader -->
<div id="preloader">
<div class="preloader">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- /Preloader -->
<!-- jQuery Plugins -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/owl.carousel.min.js"></script>
<script type="text/javascript" src="js/jquery.magnific-popup.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<!-- Footer -->
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
color: white;
text-align: center;
}
</style>
<div class="footer">
<p style="font-size:14px; color:#000000; font-weight:normal; text-align: center ">
COPYRIGHT © 2019. SITE CREAT DE <span style="color: #07B425; font-weight:bold">ADRIAN VICHIRIUC</span></p>
</div>
</body>
</html>
CSS
/*------------------------------------*\
General
\*------------------------------------*/
/* -- Buttons -- */
.main-btn, .white-btn, .outline-btn {
display: inline-block;
padding: 10px 35px;
margin: 3px;
border: 2px solid transparent;
border-radius: 3px;
-webkit-transition: 0.2s opacity;
transition: 0.2s opacity;
}
.main-btn {
background: #6195FF;
color: #FFF;
}
.white-btn {
background: #FFF;
color: #10161A !important;
}
.outline-btn {
background: transparent;
color: #6195FF !important;
border-color: #6195FF;
}
.main-btn:hover, .white-btn:hover, .outline-btn:hover {
opacity: 0.8;
}
/*------------------------------------*\
Logo
\*------------------------------------*/
.navbar-brand {
padding: 0;
}
.navbar-right {
float: right!important;
margin-right: -350px;
}
.navbar-brand .logo, .navbar-brand .logo-alt {
max-height: 50px;
display: block;
}
#nav:not(.nav-transparent):not(.fixed-nav) .navbar-brand .logo-alt {
display: none;
}
#nav.nav-transparent:not(.fixed-nav) .navbar-brand .logo {
display: none;
}
#nav.fixed-nav .navbar-brand .logo-alt {
display: none;
}
#media only screen and (max-width: 767px) {
#nav.nav-transparent .navbar-brand .logo-alt {
display: none !important;
}
#nav.nav-transparent .navbar-brand .logo {
display: block !important;
}
}
/*------------------------------------*\
Navigation
\*------------------------------------*/
#nav {
padding: 10px 0px;
background: #FFF;
-webkit-transition: 0.2s padding;
transition: 0.2s padding;
z-index: 999;
}
#nav.navbar {
border: none;
border-radius: 0;
margin-bottom: 0px;
}
#nav.fixed-nav {
position: fixed;
left: 0;
right: 0;
padding: 0px 0px;
background-color: #FFF !important;
border-bottom: 1px solid #EEE;
}
#nav.nav-transparent {
background: transparent;
}
/* -- default nav -- */
#media only screen and (min-width: 768px) {
.main-nav li {
padding: 0px 15px;
}
.main-nav li a {
font-size: 14px;
-webkit-transition: 0.2s color;
transition: 0.2s color;
}
.main-nav>li>a {
color: #10161A;
padding: 15px 0px;
}
#nav.nav-transparent:not(.fixed-nav) .main-nav>li>a {
color: #000;
}
.main-nav>li>a:hover, .main-nav>li>a:focus, .main-nav>li.active>a {
background: transparent;
color: #6195FF;
}
.main-nav>li>a:after {
content: "";
display: block;
background-color: #6195FF;
height: 2px;
width: 0%;
-webkit-transition: 0.2s width;
transition: 0.2s width;
}
.main-nav>li>a:hover:after, .main-nav>li.active>a:after {
width: 100%;
}
/* dropdown */
.has-dropdown {
position: relative;
}
.has-dropdown>a:before {
font-family: 'FontAwesome';
content: "\f054";
font-size: 6px;
margin-left: 6px;
float: right;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transition: 0.2s transform;
transition: 0.2s transform;
}
.dropdown {
position: absolute;
right: -50%;
top: 0;
background-color: #6195FF;
width: 200px;
-webkit-box-shadow: 0px 5px 5px -5px rgba(53, 64, 82, 0.2);
box-shadow: 0px 5px 5px -5px rgba(53, 64, 82, 0.2);
-webkit-transform: translateY(15px) translateX(50%);
-ms-transform: translateY(15px) translateX(50%);
transform: translateY(15px) translateX(50%);
opacity: 0;
visibility: hidden;
-webkit-transition: 0.2s all;
transition: 0.2s all;
}
.main-nav>.has-dropdown>.dropdown {
top: 100%;
right: 50%;
}
.main-nav>.has-dropdown>.dropdown .dropdown.dropdown-left {
right: 150%;
}
.dropdown li a {
display: block;
color: #FFF;
border-top: 1px solid rgba(250, 250, 250, 0.1);
padding: 10px 0px;
}
.dropdown li:nth-child(1) a {
border-top: none;
}
.has-dropdown:hover>.dropdown {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0px) translateX(50%);
-ms-transform: translateY(0px) translateX(50%);
transform: translateY(0px) translateX(50%);
}
.has-dropdown:hover>a:before {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.nav-collapse {
display: none;
}
}
/* -- mobile nav -- */
#media only screen and (max-width: 767px) {
#nav {
padding: 0px 0px;
}
#nav.nav-transparent {
background: #FFF;
}
.main-nav {
position: fixed;
right: 0;
height: calc(100vh - 80px);
-webkit-box-shadow: 0px 80px 0px 0px #1C1D21;
box-shadow: 0px 80px 0px 0px #1C1D21;
max-width: 250px;
width: 0%;
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
margin: 0;
overflow-y: auto;
background: #1C1D21;
-webkit-transition: 0.2s all;
transition: 0.2s all;
}
#nav.open .main-nav {
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
width: 100%;
}
.main-nav li {
border-top: 1px solid rgba(250, 250, 250, 0.1);
}
.main-nav li a {
display: block;
color: #FFF;
-webkit-transition: 0.2s all;
transition: 0.2s all;
}
.main-nav>li.active {
border-left: 6px solid #6195FF;
}
.main-nav li a:hover, .main-nav li a:focus {
background-color: #6195FF;
color: #FFF;
opacity: 1;
}
.has-dropdown>a:after {
content: "\f054";
font-family: 'FontAwesome';
float: right;
-webkit-transition: 0.2s -webkit-transform;
transition: 0.2s -webkit-transform;
transition: 0.2s transform;
transition: 0.2s transform, 0.2s -webkit-transform;
}
.dropdown {
opacity: 0;
visibility: hidden;
height: 0;
background: rgba(250, 250, 250, 0.1);
}
.dropdown li a {
padding: 6px 10px;
}
.has-dropdown.open-drop>a:after {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.has-dropdown.open-drop>.dropdown {
opacity: 1;
visibility: visible;
height: auto;
-webkit-transition: 0.2s all;
transition: 0.2s all;
}
}
/* -- nav btn collapse -- */
.nav-collapse {
position: relative;
float: right;
width: 40px;
height: 40px;
margin-top: 5px;
margin-right: 5px;
cursor: pointer;
z-index: 99999;
}
.nav-collapse span {
display: block;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
width: 25px;
}
.nav-collapse span:before, .nav-collapse span:after {
content: "";
display: block;
}
.nav-collapse span, .nav-collapse span:before, .nav-collapse span:after {
height: 4px;
background: #10161A;
-webkit-transition: 0.2s all;
transition: 0.2s all;
}
.nav-collapse span:before {
-webkit-transform: translate(0%, 10px);
-ms-transform: translate(0%, 10px);
transform: translate(0%, 10px);
}
.nav-collapse span:after {
-webkit-transform: translate(0%, -14px);
-ms-transform: translate(0%, -14px);
transform: translate(0%, -14px);
}
#nav.open .nav-collapse span {
background: transparent;
}
#nav.open .nav-collapse span:before {
-webkit-transform: translateY(0px) rotate(-135deg);
-ms-transform: translateY(0px) rotate(-135deg);
transform: translateY(0px) rotate(-135deg);
}
#nav.open .nav-collapse span:after {
-webkit-transform: translateY(-4px) rotate(135deg);
-ms-transform: translateY(-4px) rotate(135deg);
transform: translateY(-4px) rotate(135deg);
}
/*------------------------------------*\
Header
\*------------------------------------*/
header {
position: relative;
}
#home {
height: 100vh;
}
#home .home-wrapper {
position: absolute;
left: 0px;
right: 0px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
}
.home-content button {
margin-top: 20px;
}
.header-wrapper h2 {
display: inline-block;
margin-bottom: 0px;
}
.header-wrapper .breadcrumb {
float: right;
background: transparent;
margin-bottom: 0px;
}
.header-wrapper .breadcrumb .breadcrumb-item.active {
color: #868F9B;
}
.breadcrumb>li+li:before {
color: #868F9B;
}
/*------------------------------------*\
About
\*------------------------------------*/
.about {
position: relative;
text-align: center;
padding: 40px 20px;
border: 1px solid #EEE;
margin: 15px 0px;
}
.about i {
font-size: 36px;
color: #6195FF;
margin-bottom: 20px;
}
.about:after {
content: "";
background-color: #1C1D21;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0%;
z-index: -1;
-webkit-transition: 0.2s width;
transition: 0.2s width;
}
.about:hover:after {
width: 100%;
}
.about h3 {
-webkit-transition: 0.2s color;
transition: 0.2s color;
}
.about:hover h3 {
color: #fff;
}
/*------------------------------------*\
Portfolio
\*------------------------------------*/
.work {
position: relative;
padding: 20px;
}
.work>img {
width: 100%;
}
.work .overlay {
background: #1C1D21;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
opacity: 0;
-webkit-transition: 0.2s opacity;
transition: 0.2s opacity;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.work:hover .overlay {
-webkit-transition-delay: 0s;
transition-delay: 0s;
opacity: 0.8;
}
.work .work-content {
position: absolute;
left: 25px;
right: 25px;
top: 50%;
text-align: center;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.work .work-content h3 {
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
opacity: 0;
color: #FFF;
margin-bottom: 30px;
-webkit-transition: 0.2s all;
transition: 0.2s all;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.work:hover .work-content h3 {
-webkit-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
opacity: 1;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.work .work-content span {
display: block;
text-transform: uppercase;
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
opacity: 0;
color: #6195FF;
margin-bottom: 5px;
-webkit-transition: 0.2s all;
transition: 0.2s all;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.work:hover .work-content span {
-webkit-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
opacity: 1;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.work .work-link {
text-align: center;
margin-top: 20px;
opacity: 0;
-webkit-transition: 0.2s opacity;
transition: 0.2s opacity;
}
.work .work-link a {
display: inline-block;
width: 50px;
height: 50px;
background-color: #6195FF;
color: #FFF;
line-height: 50px;
text-align: center;
}
.work:hover .work-link {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
opacity: 1;
}
/*------------------------------------*\
Services
\*------------------------------------*/
.service {
position: relative;
padding: 40px 20px 40px 70px;
margin: 15px 0px;
border: 1px solid #EEE;
}
.service i {
position: absolute;
left: 20px;
text-align: center;
font-size: 32px;
color: #6195FF;
border-radius: 50%;
}
.service:after {
content: "";
background-color: #1C1D21;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0%;
z-index: -1;
-webkit-transition: 0.2s width;
transition: 0.2s width;
}
.service:hover:after {
width: 100%;
}
.service h3 {
-webkit-transition: 0.2s color;
transition: 0.2s color;
}
.service:hover h3 {
color: #fff;
}
/*------------------------------------*\
Why choose us
\*------------------------------------*/
.feature {
margin: 15px 0px;
}
.feature i {
float: left;
padding: 5px;
border-radius: 50%;
color: #6195FF;
border: 1px solid #6195FF;
margin-right: 5px;
}
/*------------------------------------*\
Numbers
\*------------------------------------*/
.number {
text-align: center;
margin: 15px 0px;
}
.number i {
color: #6195FF;
font-size: 36px;
margin-bottom: 20px;
}
.number h3 {
font-size: 36px;
margin-bottom: 30px;
}
/*------------------------------------*\
Pricing
\*------------------------------------*/
.pricing {
position: relative;
text-align: center;
border: 1px solid #EEE;
background-color: #FFF;
z-index: 11;
margin: 15px 0px;
}
.pricing::after {
content: "";
background-color: #1C1D21;
position: absolute;
left: 0;
right: 0;
top: 0;
height: 0%;
z-index: -1;
-webkit-transition: 0.2s height;
transition: 0.2s height;
}
.pricing:hover:after {
height: 100%;
}
.pricing .price-head {
position: relative;
margin-bottom: 20px;
}
.pricing .price-title {
display: block;
padding: 40px 0px 20px;
text-transform: uppercase;
-webkit-transition: 0.2s color;
transition: 0.2s color;
}
.pricing:hover .price-title {
color: #6195FF;
}
.pricing .price {
position: relative;
width: 140px;
height: 140px;
line-height: 140px;
text-align: center;
margin: auto;
border-radius: 50%;
border: 2px solid #6195FF;
}
.pricing .price h3 {
font-size: 42px;
margin: 0px;
-webkit-transition: 0.2s color;
transition: 0.2s color;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%;
position: absolute;
left: 0;
right: 0;
}
.pricing:hover .price h3 {
color: #fff;
}
.pricing .duration {
display: block;
font-size: 14px;
text-transform: uppercase;
color: #10161A;
-webkit-transition: 0.2s color;
transition: 0.2s color;
}
.pricing:hover .duration {
color: #fff;
}
.pricing .price-btn {
padding-top: 20px;
padding-bottom: 40px;
}
/*------------------------------------*\
Testimonial
\*------------------------------------*/
.testimonial {
margin: 15px 0px;
}
.testimonial-meta {
position: relative;
padding-left: 90px;
height: 70px;
margin-bottom: 20px;
padding-top: 10px;
}
.testimonial img {
position: absolute;
left: 0;
top: 0;
width: 70px !important;
height: 70px !important;
border-radius: 50%;
}
.testimonial h3 {
margin-bottom: 5px;
}
.testimonial span {
font-size: 14px;
color: #6195FF;
text-transform: uppercase;
}
/*------------------------------------*\
Team
\*------------------------------------*/
.team {
position: relative;
background-color: #F4F4F4;
padding: 40px 20px;
margin: 15px 0px;
}
.team::after {
content: "";
background-color: #1C1D21;
position: absolute;
left: 0;
right: 0;
top: 0;
height: 0%;
z-index: 1;
-webkit-transition: 0.2s height;
transition: 0.2s height;
}
.team:hover:after {
height: 100%;
}
.team-img {
position: relative;
margin-bottom: 20px;
z-index: 11;
}
.team-img>img {
width: 100%;
}
.team .overlay {
background: #1C1D21;
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
opacity: 0;
-webkit-transition: 0.2s opacity;
transition: 0.2s opacity;
}
.team:hover .overlay {
opacity: 0.8;
}
.team .team-content {
text-align: center;
position: relative;
z-index: 11;
}
.team .team-content h3 {
margin-bottom: 30px;
-webkit-transition: 0.2s color;
transition: 0.2s color;
}
.team .team-content span {
font-size: 14px;
text-transform: uppercase;
-webkit-transition: 0.2s color;
transition: 0.2s color;
}
.team:hover .team-content h3 {
color: #FFF;
}
.team:hover .team-content span {
color: #6195FF;
}
.team .team-social {
position: absolute;
top: 0;
right: 0;
opacity: 0;
-webkit-transition: 0.2s opacity;
transition: 0.2s opacity;
}
.team .team-social a {
display: block;
line-height: 50px;
width: 50px;
text-align: center;
background-color: #6195FF;
color: #FFF;
}
.team:hover .team-social {
opacity: 1;
}
.rainbow {
/* Font options */
font-size:40px;
/* Chrome, Safari, Opera */
-webkit-animation: rainbow 3s infinite;
/* Internet Explorer */
-ms-animation: rainbow 3s infinite;
/* Standar Syntax */
animation: rainbow 3s infinite;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes rainbow{
0%{color: orange;}
10%{color: purple;}
20%{color: red;}
30%{color: CadetBlue;}
40%{color: yellow;}
50%{color: coral;}
60%{color: green;}
70%{color: cyan;}
80%{color: DeepPink;}
90%{color: DodgerBlue;}
100%{color: orange;}
}
/* Internet Explorer */
#-ms-keyframes rainbow{
0%{color: orange;}
10%{color: purple;}
20%{color: red;}
40%{color: yellow;}
60%{color: green;}
100%{color: orange;}
}
/* Standar Syntax */
#keyframes rainbow{
0%{color: orange;}
10%{color: purple;}
20%{color: red;}
40%{color: yellow;}
60%{color: green;}
100%{color: orange;}
}
/* blog reply form */
.reply-form {
margin: 40px 0px;
}
.reply-form form .input, .reply-form form .input , .reply-form form textarea {
margin-bottom:20px;
}
.reply-form form .input, .reply-form form .input {
width: calc(50% - 10px);
display: inline-block;
}
.reply-form form .input:nth-child(2) {
margin-left: 15px;
}
/*------------------------------------*\
Blog sidebar
\*------------------------------------*/
#aside .widget {
margin-bottom: 40px;
}
.widget h3 {
text-transform: uppercase;
}
/* -- search sidebar -- */
#aside .widget-search {
position: relative;
}
#aside .widget-search .search-input {
padding-right: 50px;
}
#aside .widget-search .search-btn {
position: absolute;
right: 0px;
bottom: 0px;
width: 40px;
height: 40px;
border: none;
line-height: 40px;
background-color: transparent;
color: #6195FF;
}
/* -- category sidebar -- */
.widget-category a {
display: block;
font-size: 14px;
color: #354052;
border-bottom: 1px solid #EEE;
padding: 5px;
}
.widget-category a:nth-child(1) {
border-top: 1px solid #EEE;
}
.widget-category a span {
float: right;
color: #6195FF;
}
.widget-category a:hover {
color: #6195FF;
}
/* -- tags sidebar -- */
.widget-tags a {
display: inline-block;
padding: 6px 13px;
font-size: 14px;
margin: 2px 0px;
background: #F4F4F4;
color: #10161A;
}
.widget-tags a:hover {
color: #FFF;
background-color: #6195FF;
}
/* -- posts sidebar -- */
.widget-post {
min-height: 70px;
margin-bottom: 25px;
}
.widget-post img {
display: block;
float: left;
margin-right: 10px;
margin-top: 5px;
}
.widget-post a {
display: block;
color: #10161A;
}
.widget-post a:hover {
color: #6195FF;
}
.widget-post .blog-meta {
display: inline-block;
}
.widget-post .blog-meta li {
display: inline-block;
margin-right: 5px;
color: #6195FF;
font-size: 12px;
}
.widget-post li i {
color: #6195FF;
margin-right: 5px;
}
/*------------------------------------*\
Contact
\*------------------------------------*/
.contact {
margin: 15px 0px;
text-align: center;
}
.contact i {
font-size: 36px;
color: #6195FF;
margin-bottom: 20px;
}
.contact-form {
text-align: center;
margin-top: 40px;
}
.contact-form .input {
margin-bottom: 20px;
}
.contact-form .input:nth-child(1), .contact-form .input:nth-child(2) {
width: calc(50% - 10px);
}
.contact-form .input:nth-child(2) {
margin-left: 15px;
}
/*------------------------------------*\
Footer
\*------------------------------------*/
#footer {
position: relative;
}
.footer-logo {
text-align: center;
margin-bottom: 40px;
}
.footer-logo>a>img {
max-height: 80px;
}
.footer-follow {
text-align: center;
margin-bottom: 20px;
}
.footer-follow li {
display: inline-block;
margin-right: 10px;
margin-bottom: 13px;
}
.footer-follow li a {
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 3px;
background-color: #6195FF;
color:#FFF;
}
.footer-copyright p {
text-align: center;
font-size: 200px;
text-transform: uppercase;
margin: 0;
height: 20px;
}
}
.home-content__main {
padding-top: 24rem;
position: relative;
}
/*------------------------------------*\
Responsive
\*------------------------------------*/
#media only screen and (max-width: 991px) {}
#media only screen and (max-width: 767px) {
.section-header h2.title {
font-size:31.5px;
}
.main-btn , .default-btn , .outline-btn , .white-btn {
padding: 8px 22px;
font-size:14px;
}
.home-content h1 {
font-size:36px;
}
.header-wrapper h2 {
margin-bottom: 20px;
text-align: center;
display: block;
}
.header-wrapper .breadcrumb {
float: none;
text-align: center;
}
}
#media only screen and (max-width: 480px) {
#portfolio [class*='col-xs'] {
width:100%;
}
#numbers [class*='col-xs'] {
width:100%;
}
.contact-form .input:nth-child(1), .contact-form .input:nth-child(2) {
width: 100%;
}
.contact-form .input:nth-child(2) {
margin-left: 0px;
}
.reply-form form .input, .reply-form form .input {
width: 100%;
}
.reply-form form .input:nth-child(2) {
margin-left: 0px;
}
.blog-author .media .media-left {
display: block;
padding-right: 0;
margin-bottom: 20px;
}
.blog-author .media {
text-align: center;
}
.blog-author .media .media-heading .author-social {
margin-top: 10px;
float: none;
}
.blog-author .media .media-left img {
margin: auto;
}
.blog-comments .media .media {
margin:0px -15px;
}
}
/*------------------------------------*\
Owl theme
\*------------------------------------*/
/* -- dots -- */
.owl-theme .owl-dots .owl-dot span {
border: none;
background: #EEE;
-webkit-transition: 0.2s all;
transition: 0.2s all;
}
.owl-theme .owl-dots .owl-dot:hover span {
background: #6195FF;
}
.owl-theme .owl-dots .owl-dot.active span {
background: #6195FF;
width:20px;
}
.row {
width: 94%;
max-width: 1200px;
margin: 0 auto;
}
.row:after {
content: "";
display: table;
clear: both;
}
.row .row {
width: auto;
max-width: none;
margin-left: -20px;
margin-right: -20px;
}
/* -- nav -- */
.owl-theme .owl-nav {
opacity: 0;
-webkit-transition: 0.2s opacity;
transition: 0.2s opacity;
}
.owl-theme:hover .owl-nav {
opacity: 1;
}
.owl-theme .owl-nav [class*='owl-'] {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
background: #6195FF;
color: #FFF;
padding: 0px;
width: 50px;
height: 50px;
border-radius:3px;
line-height: 50px;
margin: 0;
}
.owl-theme .owl-prev {
left: 0px;
}
.owl-theme .owl-next {
right: 0px;
}
.owl-theme .owl-nav [class*='owl-']:hover {
opacity: 0.8;
background: #6195FF;
}
/*------------------------------------*\
Back to top
\*------------------------------------*/
#back-to-top {
display:none;
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background: #6195FF;
border-radius:3px;
color: #FFF;
z-index: 9999;
-webkit-transition: 0.2s opacity;
transition: 0.2s opacity;
cursor: pointer;
}
#back-to-top:after {
content: "\f106";
font-family: 'FontAwesome';
}
#back-to-top:hover {
opacity: 0.8;
}
/*------------------------------------*\
Preloader
\*------------------------------------*/
#preloader {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-color: #FFF;
z-index: 99999;
}
.preloader {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.preloader span {
display: inline-block;
background-color: #6195FF;
width: 25px;
height: 25px;
-webkit-animation: 1s preload ease-in-out infinite;
animation: preload 1s ease-in-out infinite;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
border-radius:50%;
}
.preloader span:nth-child(1) {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.preloader span:nth-child(2) {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.preloader span:nth-child(3) {
-webkit-animation-delay: 0.15s;
animation-delay: 0.15s;
}
.preloader span:nth-child(4) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
#-webkit-keyframes preload {
0% {
-webkit-transform:scale(0);
transform:scale(0);
}
50% {
-webkit-transform:scale(1);
transform:scale(1);
}
100% {
-webkit-transform:scale(0);
transform:scale(0);
}
}
#keyframes preload {
0% {
-webkit-transform:scale(0);
transform:scale(0);
}
50% {
-webkit-transform:scale(1);
transform:scale(1);
}
100% {
-webkit-transform:scale(0);
transform:scale(0);
}
}
I tried a few things but none worked, because I'm an nob.