I have created few elements but the render is making one showing below the other. In the image below, you will see that I have a toggle below the 3 tiles instead of being place before.
that should look like the image below:
below is the code :
import React from 'react';
import PriceCard from '../components/materialdesign/PriceCard';
import { Col, Row} from 'react-bootstrap';
import PriceInfo from '../config/PriceInfo';
import TextContents from '../assets/translations/TextContents';
import './HowItWorks.css';
class HowItWorks extends React.Component {
constructor(props) {
super(props);
this.state = {
toggle: false
};
this.toggleState = this.toggleState.bind(this);
}
toggleState(){
this.setState({
toggle: !this.state.toggle
});
}
render() {
const Switch =
<form className="switch-field">
<div className="switch-field-element">
<input
type="radio"
id="switch_left"
name="switchToggle"
value={TextContents.CreditsBundle}
onChange={this.toggleState}
checked={!this.state.toggle}
/>
<label htmlFor="switch_left">{TextContents.CreditsBundle}</label>
</div>
<div className="switch-field-element">
<input
type="radio"
id="switch_right"
name="switchToggle"
value={TextContents.SubscriptionsBundle}
onChange={this.toggleState}
checked={this.state.toggle}
/>
<label htmlFor="switch_right">{TextContents.SubscriptionsBundle}</label>
</div>
</form>
const CreditBundles =
<div className="hiw-price-info-container">
<PriceCard desc={TextContents.TextDescHiw1} price={PriceInfo.Credits1.values.price} credits={PriceInfo.Credits1.values.credits} percent={PriceInfo.Credits1.values.percentage} buttontext={TextContents.BuyCreditsBtn}/>
<PriceCard desc={TextContents.TextDescHiw2} price={PriceInfo.Credits2.values.price} credits={PriceInfo.Credits2.values.credits} percent={PriceInfo.Credits2.values.percentage} buttontext={TextContents.BuyCreditsBtn}/>
<PriceCard desc={TextContents.TextDescHiw2} price={PriceInfo.Credits3.values.price} credits={PriceInfo.Credits3.values.credits} percent={PriceInfo.Credits3.values.percentage} buttontext={TextContents.BuyCreditsBtn}/>
</div>
const Subscription =
<div className="hiw-price-info-container">
<PriceCard desc={TextContents.TextDescHiw1} price={PriceInfo.Subscription1.values.price} credits={PriceInfo.Subscription1.values.credits} buttontext={TextContents.SubscribeBtn}/>
<PriceCard desc={TextContents.TextDescHiw1}price={PriceInfo.Subscription2.values.price} credits={PriceInfo.Subscription2.values.credits} buttontext={TextContents.SubscribeBtn}/>
<PriceCard desc={TextContents.TextDescHiw1} price={PriceInfo.Subscription3.values.price} credits={PriceInfo.Subscription3.values.credits} buttontext={TextContents.SubscribeBtn}/>
</div>
return (
<div className="hiw-container">
<h1> {TextContents.HowItWorksTitle} </h1>
<p> {TextContents.VillagePassport} </p>
{Switch}
{!this.state.toggle && CreditBundles}
{this.state.toggle && Subscription}
</div>
);
}
}
export default HowItWorks;
and the css :
:root {
--village-selector-height: 80px;
--village-color-blue: #14cff0;
}
.hiw-container {
margin-left: auto;
margin-right: auto;
margin-top: 5rem;
margin-bottom:5rem;
width: 70%;
display: flex;
flex-direction: column;
}
.hiw-container h1{
font-family: Fredoka One;
font-size: 50px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1;
letter-spacing: normal;
text-align: center;
color: #333333;
margin-bottom: 3rem;
}
.hiw-container h2{
font-family: Fredoka One;
font-size: 40px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 0.58;
letter-spacing: -0.8px;
text-align: center;
color: #333333;
margin-bottom: 2rem;
margin-top: 5rem;
}
.hiw-container p{
font-family: Source Sans Pro;
font-size: 20px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.6;
letter-spacing: normal;
text-align: center;
color: #616161;
}
.hiw-price-info-container {
display: flex;
flex-direction: row;
justify-content: center;
height: 500px;
}
.switch-field {
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.switch-field-element {
position: relative;
height: 80px;
}
.switch-field-element:not(:first-of-type) {
margin-left: -60px;
}
.switch-field input {
position: absolute;
height: 100%;
width: 100%;
opacity: 0;
}
.switch-field label {
display: inline-block;
position: relative;
padding: 0px 80px;
background-color:#f4f7f8;
height: 50px;
line-height: 50px;
cursor: pointer;
transition: all .1s;
color: #dfdfdf;
user-select: none;
border-radius: 40px;
font-size: 20px;
font-weight: bold;
font-family: Source Sans Pro;
}
.switch-field label::after {
content: '';
display: block;
position: absolute;
width: 4px;
height: 8px;
border-bottom: 2px solid white;
border-right: 2px solid white;
transform: rotate(45deg);
}
.switch-field input:checked + label {
background-color: var(--village-color-blue);
border-color: var(--village-color-blue);
color: white;
z-index: 1;
box-shadow: 0px 15px 20px -2px rgba(black, .1);
}
.switch-field label:first-of-type {
padding-right: 80px;
}
.switch-field label:first-of-type::before {
right: 0;
top: 0;
}
.switch-field label:first-of-type::after {
right: 12px;
top: 9px;
}
.switch-field label:last-of-type {
padding-left: 80px;
}
.switch-field label:last-of-type::before {
left: 0;
top: 0;
}
.switch-field label:last-of-type::after {
left: 12px;
top: 9px;
}
/* tablet, ipad version (change font-size here if needed)*/
#media (min-width: 768px) and (max-width: 1024px){
.hiw-container {
margin-left: auto;
margin-right: auto;
margin-bottom:5rem;
width: 50%;
}
}
/* mobile version (change font-size here if needed)*/
#media (max-width: 600px) {
.hiw-container {
margin-left: auto;
margin-right: auto;
margin-bottom:5rem;
width: 70%;
}
}
Any idea how to fix it with breaking the toggle switch experience ?
Thanks
I think if you are using bootstrap then why you are not using row and columns I can see you are using custom class for structuring which is not a good practice.
Z-index might be overwritten, try:
z-index: 1 !important;
the problem is related to CSS
.hiw-price-info-container {
display: flex;
flex-direction: row;
justify-content: center;
height: 500px;
position:relative;
}
Related
I am building a small social media site to enhance my skills in HTML CSS & JS, but I have ran into a problem.
I have an <img> in a <button>, and I am trying to change that image onclick() [the button will hide some text under the button].
The problem is that the image will not load. When I click the button, the new image will not load, and when I re-click the image to reload the image that was in the fist place, it won't load either.
The only clue I have is this error massage every time I click the buttton GET file:///C:/Users/emile/Desktop/Mini%20learning%20projects/Social%20App/scripts/iconsarrow-up.webp net::ERR_FILE_NOT_FOUND. This last part net::ERR_FILE_NOT_FOUND is weird because I copied the path of the image.
And when I try to open the image from the console in a new tab, it will tell me Your file couldn’t be accessedIt may have been moved, edited, or deleted. ERR_FILE_NOT_FOUND
Any ideas ?
Here is the code:
function ButtonHide() {
const element = document.getElementById('friend-request-container');
const personnaInfoDiv = document.getElementById('personnal-info');
const sideBarArrowTooltip = document.getElementById('sidebup-arrow-tooltip');
const friendRequestCount = document.getElementById('friend-request-count');
const sidebarArrowImage = document.getElementById('friends-arrow');
if (element.style.display === 'none') {
element.style.display = 'inline-block';
document.getElementById("personnal-info").style.marginBottom = "0px";
sideBarArrowTooltip.innerHTML = 'Hide Requests';
sidebarArrowImage.src = 'icons\arrow-up.webp';
} else {
element.style.display = 'none';
friendRequestCount.style = 'display: inline-block; position: absolute; top: 0px; width: 200px;';
document.getElementById("personnal-info").style.marginBottom = "15px";
sideBarArrowTooltip .innerHTML = 'Show Requests';
sidebarArrowImage.src = 'icons\vector-down-arrow.png';
}
}
.sidebar {
position: fixed;
left: 0;
bottom: 0;
top: 55px;
background-color: white;
z-index: 100;
padding-top: 5px;
width: 372px;
margin-left: 20px;
margin-right: 30px;
}
.sidebar-top-container {
border-bottom: solid 2px rgb(199, 199, 199);;
}
.home {
display: inline-block;
font-size: 35px;
font-family: Roboto, Arial;
}
.create-button {
display: inline-block;
font-size: 17px;
color: rgb(23, 93, 255);
text-decoration: none;
margin-left: 223px;
font-family: Roboto, Arial;
font-weight: bold;
margin-bottom: 50px;
}
.personnal-info,
.friend-request-container {
position: relative;
}
.sidebar-profile-picture {
height: 30px;
border-radius: 16px;
margin-right: 8px;
}
.my-user-name {
display: inline-block;
font-size: 16px;
font-family: Roboto, Arial;
font-weight: bold;
position: absolute;
top: -8px;
margin-left: 2px;
}
.up-arrow {
width: 25px;
position: absolute;
top: 7.5px;
display: inline-block;
margin-bottom: 5px;
}
.friend-request-container {
margin-top: 10px;
}
.friend-request-image {
display: inline-block;
height: 46px;
border-radius: 23px;
margin-left: -9px;
}
.friend-request-count {
display: inline-block;
position: absolute;
top: 0px;
}
.sidebar-container {
display: inline-block;
margin-left: 190px;
width: 30px;
height: 30px;
}
.name-and-profile {
position: relative;
}
.up-arrow {
position: absolute;
top: -26px;
}
.name-and-profile {
position: relative;
}
.hide-requests-button{
background-color: transparent;
display: inline-block;
border: none;
height: 35px;
width: 35px;
padding: 4px;
border-radius: 22px;
margin-bottom: 85px;
margin-top: 4px;
margin-left: 308px;
padding-right: 30px;
padding-left: 5px;
cursor: pointer;
margin-top: 26.5px;
}
.hide-requests-button:hover {
background-color: rgb(215, 215, 215);
}
.hide-requests-button:active {
background-color: rgb(180, 180, 180);
}
.friend-request-count {
font-size: 15px;
font-weight: bold;
font-family: Roboto, Arial;
color: rgb(118, 118, 118);
}
.sidebar-container .tooltip {
margin-left: 300px;
}
.sidebar-container .tooltip {
z-index: 200;
}
.sidebar-container:hover .tooltip{
opacity: 1;
}
.sidebar-container .tooltip {
font-family: Roboto, Arial;
position: absolute;
background-color: gray;
color: white;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 8px;
padding-right: 8px;
border-radius: 2px;
font-size: 12px;
bottom: -30px;
opacity: 0;
transition: opacity 0.15s;
pointer-events: none;
white-space: nowrap;
}
.sidebar-container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
cursor: pointer;
}
<div class="sidebar">
<div class="sidebar-top-container">
<div class="sidebar-heading">
<h1 class="home">Home</h1>
<a class="create-button" href="C:\Users\emile\Desktop\Mini learning projects\Social App\scripts\Home Page.html">Create</a>
</div>
<div class="personnal-info" style="height: 32px;" id="personnal-info">
<div class="name-and-profile">
<img class="sidebar-profile-picture" src="C:\Users\emile\Desktop\New HTML Course\icons\my profile.jpg">
<p class="my-user-name">Emile Feghali</p>
</div>
<div class="sidebar-container">
<button class="hide-requests-button" onclick="ButtonHide()">
<img class="up-arrow" id="friends-arrow" src="C:\Users\emile\Desktop\New HTML Course\icons\arrow-up.webp">
</button>
<div class="tooltip" id="sidebup-arrow-tooltip">Hide Requests</div>
</div>
</div>
<div class="friend-request-container" id="friend-request-container">
<img class="friend-request-image" src="C:\Users\emile\Desktop\New HTML Course\icons\add-friends-image.jpg">
<p class="friend-request-count" id="friend-request-count">2 pending friend requests</p>
</div>
</div>
I'm currently having some problems with the positioning of the elements on my page. When full screen the elements are centred and don't overlap.
However, when the screen is resized the elements shift to the left and start overlapping
I was wondering how to go about fixing this?
Heres my code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles.css">
<script src="https://kit.fontawesome.com/8711e0b6fa.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="content-wrapper">
<header>
[My Coily Story]
<ul>
<li>Home</li>
<li>Scenes</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
</div>
<div class="collage"></div>
<audio id="player" src="1.mp3"></audio>
<div class="player" >
<div class="control">
<i class="fas fa-play" id="playbtn"></i>
</div>
<div class="info">
Kathleen Cleaver - Natural Hair
<div class="bar">
<div id="progress"></div>
</div>
</div>
<div id="current">0:00</div>
</div>
<div class="start">
<a href="./Page/index.html">
<span></span>
<span></span>
<span></span>
<span></span>
Start
</a>
</div>
</body>
<script type="text/javascript" src="./main.js"></script>
</html>
CSS
#font-face {
font-family: 'arcade';
src: url(fonts/ARCADECLASSIC.TTF);
font-weight: 100;
font-style: Regular;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
letter-spacing: 1px;
transition: all 0.35s linear;
}
body {
background-color: black;
padding: 0;
margin: 0;
height: 100vh;
width: 100vh;
display: flex;
min-height: 100vh;
align-items: center;
justify-content: center;
scroll-behavior: none;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 1.875rem 6.25rem;
display: flex;
justify-content: space-between;
align-items: center;
font-family: Poppins, sans-serif;
z-index: 10000;
}
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 1.563rem;
text-transform: uppercase;
letter-spacing: 0.313rem;
font-family: Poppins, sans-serif;
}
.logo:hover{
pointer-events: none;
border: none;
box-shadow: none;
background: transparent;
}
header ul{
display: flex;
justify-content: center;
align-items: center;
font-family: Poppins, sans-serif;
font-size: 1.1rem;
text-transform: none;
}
header ul li {
list-style: none;
margin-left: 1.25rem;
font-family: Poppins, sans-serif;
font-size: 1.1rem;
text-transform: none;
}
header ul li a {
text-decoration: none;
padding: 0.375rem 0.938rem;
color: #fff;
border-radius: 1.25rem;
font-family: Poppins, sans-serif;
font-size: 1.1rem;
text-transform: none;
position: sticky;
}
header ul li a:hover,
header ul li a.active {
background: #fff;
color: #2b1055;
font-family: Poppins, sans-serif;
font-size: 1.1rem;
text-transform: none;
position: sticky;
border: none;
box-shadow: none;
transition-delay: 0s;
}
.collage {
background: url(./Images/1.gif);
position: absolute;
background-size: 100%;
background-repeat: no-repeat;
height: 61%;
width: 55%;
border: solid 8px;
border-color: white;
align-items: center;
min-width: 55%;
max-width: 55%;
justify-content: center;
top: 20%;
left: 27%;
margin-top: -50px;
margin-left: -50px;
}
.player {
width: 55%;
background-color: black;
display: grid;
grid-template-columns: 48px 1fr 48px;
color: white;
grid-gap: 16px;
position: relative;
border-radius: 50px;
height: 60px;
position: relative;
top: 33%;
left: 65%;
align-items: center;
justify-content: center;
margin-top: -50px;
margin-left: -50px;
}
.control, #current {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding-block: 16px;
}
#playbtn {
font-size: 24px;
color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
cursor: pointer;
}
#playbtn:hover {
-webkit-text-fill-color: white;
}
.info {
display: flex;
justify-content: center;
align-items: center;
font-size: 21px;
white-space: nowrap;
}
#current {
text-align: right;
}
.bar {
--space: -4px;
background-color: #24242424;
overflow: hidden;
left: var(--space);
right: var(--space);
top: var(--space);
bottom: var(--space);
position: absolute;
border-radius: 64px;
z-index: -2;
}
#progress {
display: block;
width: var(--progress, 0%);
background-color: white;
transition: all 1s linear;
height: 100%;
}
a {
z-index: 10000;
position: relative;
display: inline-block;
padding: 15px 30px;
color: #d4337e;
font-family: arcade;
text-transform: uppercase;
letter-spacing: 4px;
text-decoration: none;
font-size: 60px;
overflow: hidden;
transition: 0.2s;
position: relative;
}
.start {
position: relative;
top: 42%;
left: 31%;
align-items: center;
justify-content: center;
height: 60px;
width: 55%;
margin-top: -50px;
margin-left: -50px;
}
a:hover {
color: #ffffff;
background: #d4337e;
box-shadow: 0 0 10px #d4337e, 0 0 40px #d4337e, 0 0 80px #d4337e;
transition-delay: 1s;
}
a span {
position: absolute;
display: block;
}
a span:nth-child(1) {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg,transparent,#d4337e);
}
a:hover span:nth-child(1) {
left: 100%;
transition: 1s;
}
a span:nth-child(3) {
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg,transparent,#d4337e);
}
a:hover span:nth-child(3) {
right: 100%;
transition: 1s;
transition-delay: 0.5s;
}
a span:nth-child(2) {
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg,transparent,#d4337e);
}
a:hover span:nth-child(2) {
top: 100%;
transition: 1s;
transition-delay: 0.25s;
}
a span:nth-child(4) {
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg,transparent,#d4337e);
}
a:hover span:nth-child(4) {
bottom: 100%;
transition: 1s;
transition-delay: 0.75s;
}
JS
var player = document.getElementById("player");
let progress = document.getElementById("progress");
let playbtn = document.getElementById("playbtn");
var playpause = function () {
if (player.paused) {
player.play();
} else {
player.pause();
}
}
playbtn.addEventListener("click", playpause);
player.onplay = function () {
playbtn.classList.remove("fa-play");
playbtn.classList.add("fa-pause");
}
player.onpause = function () {
playbtn.classList.add("fa-play");
playbtn.classList.remove("fa-pause");
}
player.ontimeupdate = function () {
let ct = player.currentTime;
current.innerHTML = timeFormat(ct);
///progress
let duration = player.duration;
prog = Math.floor((ct * 100) / duration);
progress.style.setProperty("--progress",prog + "%");
}
function timeFormat(ct) {
minutes = Math.floor(ct / 60);
seconds = Math.floor(ct % 60);
if (seconds < 10) {
seconds = "0"+seconds;
}
return minutes + ":" + seconds;
}
Any help is appreciated.
From what i see you plan your element positioning on display relative or absolute.
on the other hand you should build your layout with flexbox
So check this out:
//Code for button a donde quieres ir
//Start var
var nearby_search;
function nearby_choose(choice){
nearby_search = choice;
}
//Overlay code
function nearby_search_on() {
document.getElementById("nearby_search").style.display = "block";
}
function nearby_search_off() {
document.getElementById("nearby_search").style.display = "none";
}
#font-face {
font-family: biolinum;
src: 'fonts/LinBiolinum_R.ttf';
}
#font-face {
font-family: biolinum;
src: 'fonts/LinBiolinum_RB.ttf';
font-weight: bold;
}
#font-face {
font-family: biolinum;
src: 'fonts/LinBiolinum_RI.ttf';
font-style: italic;
}
body {
background-color: #FCF7F8;
font-size: 62.5%;
height: 100%;
margin: 0px;
}
p {
margin-block-start: 0rem;
margin-block-end: 0rem;
}
h1 {
margin-block-start: 0rem;
margin-block-end: 0rem;
}
.domainhome {
font-family: biolinum;
font-size: 2rem;
text-align: center;
color: #1D263B;
background-color: #FCF7F8;
border: none;
cursor: pointer;
outline:none;
margin-top: 2rem;
margin-left: 5rem;
}
a:link {
color: #1D263B;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: #1D263B;
background-color: transparent;
text-decoration: none;
}
.flex-container {
display: flex;
flex-shrink: 0;
/* background-color: DodgerBlue; */
margin-top: 4rem;
}
.left-bar {
flex-direction: column;
margin-left: 5rem;
}
.right-bar {
flex-direction: column;
margin-left: 5rem;
margin-right: 5rem;
height: 100%;
width: 100%;
}
button {
transition: 0.4s;
}
button:hover {
transform: rotate(-1deg) translate(0px, -8px);
}
.adondequieresir {
font-family: biolinum;
font-size: 1.66rem;
text-align: center;
color: #FCF7F8;
background-color: #1D263B;
border: none;
width: 275px;
height: 75px;
cursor: pointer;
outline:none;
margin-bottom: 3rem;
}
.agregarubicacion {
font-family: biolinum;
font-size: 1.33rem;
text-align: center;
color: #FCF7F8;
background-color: #1D263B;
border: none;
width: 275px;
height: 50px;
border-radius: 50px;
cursor: pointer;
outline:none;
margin-bottom: 3rem;
}
.personasunidas {
font-family: biolinum;
font-size: 1.33rem;
text-align: center;
color: #FCF7F8;
background-color: #1D263B;
border: none;
width: 275px;
height: 50px;
border-radius: 50px;
cursor: pointer;
outline:none;
margin-bottom: 3rem;
}
.icons {
float: left;
margin-left: 7px;
margin-right: 10px;
}
#map {
height: 400px;
}
#nearby_search {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="flex-container">
<div class="left-bar">
<div>
<button onClick="nearby_search_on()" class="adondequieresir"><p>¿a dónde quieres ir?</p></button>
<div id="nearby_search">
<button onClick="nearby_search_off()" class="adondequieresir" style="background-color: #A288E3;"><p>¿a dónde quieres ir?</p></button>
</div>
</div>
</div>
</body>
</html>
I'm trying to create something like a dropdown menu, but more stylish. So I decided not to use a tag and instead use javascript variables and buttons to accomplish my goal. But the point is, when the button is clicked, I want it to turn to lighter, darken everything behind and (eventually) add other buttons with options to choose from. And the snippet above is my (faultish) approach. For example, I actually used two buttons to try and simulate the color change of virtually the same "¿a donde quieres ir" button. How can I responsively align these two buttons? What would be the cleanest way to accomplish what I want as a whole? I would kindly appreciate any help :)
I think you can use one button, separate it from the background, and then use 'z-index' to put the button up.
function nearby_search_toggle() {
var tmpDisplay = document.getElementById("tmpBg");
var tmpBtn = document.getElementById("tmpBtn");
if (tmpDisplay.style.display == 'block') {
tmpDisplay.style.display = "none";
tmpBtn.classList.remove('active');
} else {
tmpDisplay.style.display = "block";
tmpBtn.classList.add('active');
}
}
body {
background-color: #FCF7F8;
font-size: 62.5%;
height: 100%;
margin: 0px;
}
p {
margin-block-start: 0rem;
margin-block-end: 0rem;
}
h1 {
margin-block-start: 0rem;
margin-block-end: 0rem;
}
.domainhome {
font-family: biolinum;
font-size: 2rem;
text-align: center;
color: #1D263B;
background-color: #FCF7F8;
border: none;
cursor: pointer;
outline: none;
margin-top: 2rem;
margin-left: 5rem;
}
a:link {
color: #1D263B;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: #1D263B;
background-color: transparent;
text-decoration: none;
}
.flex-container {
display: flex;
flex-shrink: 0;
/* background-color: DodgerBlue; */
margin-top: 4rem;
}
.left-bar {
flex-direction: column;
margin-left: 5rem;
}
.right-bar {
flex-direction: column;
margin-left: 5rem;
margin-right: 5rem;
height: 100%;
width: 100%;
}
button {
transition: 0.4s;
}
button:hover {
transform: rotate(-1deg) translate(0px, -8px);
}
.adondequieresir {
position: relative;
font-family: biolinum;
font-size: 1.66rem;
text-align: center;
color: #FCF7F8;
background-color: #1D263B;
border: none;
width: 275px;
height: 75px;
cursor: pointer;
outline: none;
margin-bottom: 3rem;
z-index: 2;
}
.adondequieresir.active {
background-color: white;
color: red;
}
#tmpBg {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
}
.agregarubicacion {
font-family: biolinum;
font-size: 1.33rem;
text-align: center;
color: #FCF7F8;
background-color: #1D263B;
border: none;
width: 275px;
height: 50px;
border-radius: 50px;
cursor: pointer;
outline: none;
margin-bottom: 3rem;
}
.personasunidas {
font-family: biolinum;
font-size: 1.33rem;
text-align: center;
color: #FCF7F8;
background-color: #1D263B;
border: none;
width: 275px;
height: 50px;
border-radius: 50px;
cursor: pointer;
outline: none;
margin-bottom: 3rem;
}
.icons {
float: left;
margin-left: 7px;
margin-right: 10px;
}
#map {
height: 400px;
}
<div class="flex-container">
<div class="left-bar">
<div>
<div id="tmpBg"></div>
<button onClick="nearby_search_toggle();" class="adondequieresir" id="tmpBtn">
<p>¿a dónde quieres ir?</p>
</button>
</div>
</div>
</div>
When I click the input the page is going crazy on the phone. There is not problem on the desktop. I believe the problem is because of the CSS but couldn't figure it out. I am a beginner designer and I am working on responsive web designers. When I click the input the background changes and page is not loading correctly.
This is the HTML of the site
body {
font-family: 'Playfair Display', serif;
position: relative;
background-image: url("pop-zebra-4q3Ogm3Kt44-unsplash.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 100vh;
}
body::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
background-color: rgba(0, 0, 0, 0.8)
}
#all {
position: absolute;
right: 50%;
bottom: 50%;
transform: translate(50%, 50%);
padding: 3rem;
z-index: 1;
color: #fff;
}
.showcase-top {
text-align: center;
margin-right: 2rem;
}
.showcase-top h1 {
font-size: 3rem;
font-weight: 900;
margin-bottom: 0.8rem;
}
.showcase-top p {
font-size: 1.1rem;
letter-spacing: 5px
}
#second {
margin-top: 0.2rem
}
.tabs {
display: flex;
text-align: center;
padding: 2rem;
}
.tab {
width: 100px;
height: 100px;
text-align: center;
border: 1px solid rgba(166, 151, 7, 0.8);
border-radius: 50%;
margin-right: 2rem;
}
.tabs .tab h1 {
margin-top: 0.9rem;
}
.form {
padding: 0.5rem 5rem;
text-align: center;
margin-right: 2.5rem;
width: 90%;
max-width: 900px;
padding: 10px 50px;
margin-left: 0.6rem;
}
.form input {
width: 70%;
padding: 0.8rem;
border: none;
border-radius: 1.5rem;
margin-right: 0.5rem;
outline: none;
}
.form button {
width: 25%;
padding: 0.8rem;
border-radius: 1.5rem;
border: none;
background-color: #a69802;
color: #edece1;
cursor: pointer;
outline: none;
}
.footer {
color: rgba(255, 255, 255, 0.6);
width: 100%;
font-size: 6px;
position: absolute;
bottom: 10%;
left: 50%;
transform: translate(-10%, 51%);
letter-spacing: 1px
}
#media screen and (max-width:768px) {
.tabs {
flex-direction: column;
width: 100%;
align-items: center;
justify-content: center;
margin-left: 0.6rem;
}
.tab {
margin-bottom: 1rem;
height: 90px;
width: 90px;
}
.form {
display: inline-block;
margin-right: 1rem;
margin-left: 1rem;
margin-top: -3rem;
width: 100%;
}
.form button {
width: 100px;
}
.showcase-top {
width: 500px;
margin-left: 1rem;
}
.showcase-top h1 {
font-size: 2rem;
}
.showcase-top p {
font-size: 1rem;
letter-spacing: 3px;
}
}
#media screen and (min-width:320px) and (max-width:480px) {
.form {
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
}
.form input {
width: 65%;
}
.form button {
width: 40%;
margin-top: 1rem;
}
.showcase-top p {
font-size: 0.7rem
}
.tabs {
padding: 0;
padding-top: 1.2rem
}
.tab {
height: 90px;
width: 90px;
}
.footer {
bottom: 15%;
left: 23%
}
}
<body>
<showcase id="all">
<div class="showcase-top">
<h1>Coming Soon</h1>
<p>My website is under construction</p>
<p id="second">Follow us now!</p>
</div>
<section class="tabs">
<div class="tab">
<h1 id="day">na</h1>
<p>Days</p>
</div>
<div class="tab">
<h1 id="hour">na</h1>
<p>Hours</p>
</div>
<div class="tab">
<h1 id="min">na</h1>
<p>Minutes</p>
</div>
<div class="tab">
<h1 id="sec">na</h1>
<p>Seconds</p>
</div>
</section>
<form class="form">
<input type="email" placeholder="Enter Email...">
<button type="submit">Subscribe</button>
</form>
</showcase>
<footer class="footer">
<h1>Designed by Cag | Copyright © 2021</h1>
</footer>
I've got this working fine but for some reason my links aren't centered.
.actions {
-webkit-align-content: center;
align-content: center;
}
.useraction {
font-family: 'Noto Sans', sans-serif;
font-size: 1.5vw;
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
line-height: 1em;
}
#media only screen and (max-width: 500px) {
.useraction {
font-family: 'Noto Sans', sans-serif;
font-size: 0.75vw;
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
line-height: 1em;
}
}
a {
color: #FFFFFF;
text-decoration: none;
display: inline-block;
text-align: center;
padding: 0;
position: relative;
}
a:after {
background: none repeat scroll 0 0 transparent;
text-align: center;
bottom: 0;
content: "";
display: inline;
height: 0.5vh;
left: 50%;
position: absolute;
background: #07F446;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
a:hover:after {
width: 100%;
left: 0;
}
<link href="https://fonts.googleapis.com/css?family=Noto+Sans&display=swap" rel="stylesheet">
<div class="actions">
<p class="useraction">Contact</p></a>
<br>
<p class="useraction">Log In</p>
</div>
As you can see, the underlines work but for some reason the links are left aligned. I need the links to show in the center.
Any help would be very much appreciated, thanks in advance.
Because it's text-align:center, not align-content:center.
Also, you have an extra </a> tag in your HTML.
.actions {
-webkit-align-content: center;
text-align: center;
}
.useraction {
font-family: 'Noto Sans', sans-serif;
font-size: 1.5vw;
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
line-height: 1em;
}
#media only screen and (max-width: 500px) {
.useraction {
font-family: 'Noto Sans', sans-serif;
font-size: 0.75vw;
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
color: #000000;
line-height: 1em;
}
}
a {
color: #FFFFFF;
text-decoration: none;
display: inline-block;
text-align: center;
padding: 0;
position: relative;
}
a:after {
background: none repeat scroll 0 0 transparent;
text-align: center;
bottom: 0;
content: "";
display: inline;
height: 0.5vh;
left: 50%;
position: absolute;
background: #07F446;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
a:hover:after {
width: 100%;
left: 0;
}
<link href="https://fonts.googleapis.com/css?family=Noto+Sans&display=swap" rel="stylesheet">
<div class="actions">
<p class="useraction">Contact</p>
<br>
<p class="useraction">Log In</p>
</div>