Was following a tutorial on how to create a hoverable drop-down button with HTML/CSS. The button displays on the page when I load but does not display the links when I hover over it. I thought it may have been the browser but it does the same thing in Firefox and google chrome. I changed the code around when I tried it initially, then typed the code verbatim as the tutorial but had the same issue. Tried to post screenshot of page but site would not allow me yet.
.container {
text-align: center;
}
h1 {
color: brown;
}
.crumbs-btn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.crumbs {
position: relative;
display: inline-block;
}
.dropdown-crumbs {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-crumbs a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-crumbs a: hover {
background-color: #ddd;
}
.crumbs: hover .dropdown-crumbs {
display: block;
}
.crumbs: hover .crumbs-btn {
background-color: #3e8e41;
}
<!DOCTYPE html>
<html>
<head>
<title>Memoir of the mind</title>
<!--<meta http-equiv="refresh" content="10"> -->
</head>
<body>
<div class="container">
<h1>Fish for Waves</h1>
<!--<p>this will refresh after ten seconds</p> -->
<p\><b>The website dedicated to providing daily gems of wisdom
to help nourish your mind and spirit.</b></p>
<img src="pictures\Thinking-Man.jpg" alt="Thinking-Man" width="200" height="300">
</div>
<br>
<br>
<div id="proverbs or phrases">
<h2>Daily Crumbs</h2>
<h4>February 28, 2022</h4>
<p>"Wisdom stems from the tree of experience and the branch of patience"</p>
<p>-<i>Buddy Nawlidge</i></p>
</div>
<div class="crumbs">
<button class="crumbs-btn">Previous Crumbs</button>
<div class="dropdown-crumbs">
Mar 9th, 2022
Mar 10th, 2022
Mar 11th, 2022
</div>
</div>
</body>
</html>
Divide your CSS from HTML. Create a CSS file, I named mine app.css
This is the snippet:
.container {
text-align: center;
}
h1 {
color: brown;
}
.crumbs-btn {
background-color: #04aa6d;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.crumbs {
position: relative;
display: inline-block;
}
.dropdown-crumbs {
visibility: hidden;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-crumbs a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-crumbsa:hover {
background-color: #ddd;
}
.crumbs:hover .dropdown-crumbs {
visibility: visible;
}
.crumbs:hover .crumbs-btn {
background-color: #3e8e41;
}
<!DOCTYPE html>
<html>
<head>
<title>Memoir of the mind</title>
<!--<meta http-equiv="refresh" content="10"> -->
<link rel="stylesheet" href="/app.css">
</head>
<body>
<div class="container">
<h1>Fish for Waves</h1>
<!--<p>this will refresh after ten seconds</p> -->
<p><b>The website dedicated to providing daily gems of wisdom
to help nourish your mind and spirit.</b></p>
<img src="pictures\Thinking-Man.jpg" alt="Thinking-Man" width="200" height="300">
</div>
<br>
<br>
<div id="proverbs or phrases">
<h2>Daily Crumbs</h2>
<h4>February 28, 2022</h4>
<p>"Wisdom stems from the tree of experience and the branch of patience"</p>
<p>-<i>Buddy Nawlidge</i></p>
</div>
<div class="crumbs">
<button class="crumbs-btn">Previous Crumbs</button>
<div class="dropdown-crumbs">
Mar 9th, 2022
Mar 10th, 2022
Mar 11th, 2022
</div>
</div>
</body>
</html>
I used visibility hidden and visible but it also works with your way too. There are many solutions to do the same thing. There is nothing wrong with your code but I think you should divide your HTML from the CSS (external) so that the hover works better.
Related
I am incredibly new to html and css, so please bear with me. I am attempting to make a website for two airbnb listings, and the webpage looks fine on a computer: Display on Webpage Here
However, on mobile, everything looks completely different: Display on Mobile Here
.titlecard {
text-align: center;
}
.airbnb-embed-frame {
float: center;
display: block;
}
p {
font-family: sans-serif;
}
.navbar {
overflow: hidden;
background-color: #0494CE;
font-family: Arial;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.column {
text-align: center;
float: left;
width: 50%;
}
.row:after {
content: "";
display: table;
clear: both;
flex-direction: column;
}
.button {
background-color: white;
border: 2px solid #0494CE;
padding: 12px 28px;
text-align: center;
font-family: 'Times New Roman', Times, serif;
font-style: normal;
display: inline-block;
font-size: 16px;
color: black;
transition-duration: 0.4s;
}
.button:hover {
background-color: #0494CE;
color: white;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, intial-scale=1.0" />
<title>Seas The Day</title>
<link href="seastheday.css" rel="stylesheet" />
</head>
<body bgcolor="#FFFFFF">
</div>
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn"> About
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Seas The Day Top Floor
Seas The Day Bottom Floor
</div>
</div>
Contact Us
</div>
<div class="titlecard">
<img width="50%" src="seastheday.png">
</div>
<div class="row">
<div class="column">
<div class="airbnb-embed-frame" data-id="667282659982690585" data-view="home" style="width:450px;height:300px;margin:auto">View On Airbnb<a href="https://www.airbnb.com/rooms/667282659982690585?check_in=2022-08-24&check_out=2022-08-31&guests=1&adults=1&s=66&source=embed_widget"
rel="nofollow">Seas The Day</a>
<script async="" src="https://www.airbnb.com/embeddable/airbnb_jssdk"></script>
</div>
</div>
<div class="column">
<div class="airbnb-embed-frame" data-id="678907740859397970" data-view="home" style="width:450px;height:300px;margin:auto">View On AirbnbSeas The Day 2
<script async="" src="https://www.airbnb.com/embeddable/airbnb_jssdk"></script>
</div>
</div>
</div>
<div class="row">
<div class="column">
Learn More
</div>
<div class="column">
Learn More
</div>
</div>
</body>
</html>
Is there any way that I can make it so this doesn't occur and the mobile browser looks similar to the desktop? What are my alternatives if this is impossible?
I'd recommend using flexbox instead of floats, which are an older and less efficient way to do your layout. In the code below I stacked the airbnb frames vertically for mobile and tablet view, then horizontally for desktop like you had them. I had to rearrange some of your html code to achieve this, and use media queries. It was easier for me to use style tags to add the CSS for this example. I also had to change the width of the airbnb-embed-frame and remove the inline style rules in the html for that, as the 450px width was causing problems with the layout in mobile view. I tried to put the code in the example setting for the answer but it wasn't showing the airbnb frames. I hope this answer is satisfactory, this is kind of my take on how I'd like to make it look.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, intial-scale=1.0" />
<title>Seas The Day</title>
<link href="seastheday.css" rel="stylesheet" />
</head>
<style>
.titlecard {
text-align: center;
}
.airbnb-embed-frame {
float: center;
display: block;
}
p {
font-family: sans-serif;
}
.navbar {
overflow: hidden;
background-color: #0494CE;
font-family: Arial;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
#media (min-width: 1024px) {
.row{
display: flex;
justify-content: space-around;
}
}
.airbnb-embed-frame{
width: 300px;
margin: auto;
}
#media (min-width: 768px) {
.airbnb-embed-frame{
width: 450px;
}
}
.column {
display: flex;
flex-direction: column;
align-items: center;
}
.column-2{
margin: 30px;
}
.button {
background-color: white;
border: 2px solid #0494CE;
padding: 12px 28px;
text-align: center;
font-family: 'Times New Roman', Times, serif;
font-style: normal;
display: inline-block;
font-size: 16px;
color: black;
transition-duration: 0.4s;
}
.button:hover {
background-color: #0494CE;
color: white;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
</style>
<body bgcolor="#FFFFFF">
</div>
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn"> About
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Seas The Day Top Floor
Seas The Day Bottom Floor
</div>
</div>
Contact Us
</div>
<div class="titlecard">
<img width="50%" src="seastheday.png">
</div>
<div class="row">
<div class="column">
<div class="airbnb-embed-frame" data-id="667282659982690585" data-view="home" >View On Airbnb<a href="https://www.airbnb.com/rooms/667282659982690585?check_in=2022-08-24&check_out=2022-08-31&guests=1&adults=1&s=66&source=embed_widget"
rel="nofollow">Seas The Day</a>
<script async="" src="https://www.airbnb.com/embeddable/airbnb_jssdk"></script>
</div>
<div class="column-2">
Learn More
</div>
</div>
<div class="column">
<div class="airbnb-embed-frame" data-id="678907740859397970" data-view="home" >View On AirbnbSeas The Day 2
<script async="" src="https://www.airbnb.com/embeddable/airbnb_jssdk"></script>
</div>
<div class="column-2">
Learn More
</div>
</div>
</div>
</body>
</html>
I want my website to be responsive and adjust to any device. I'm using glitch.com to create this website. For example on mac os, when I set my website to full screen there is a scrolling bar even thought I don't want there to be one. How can I achieve a responsive website? I've tried scaling my website down when on different devices but it wont work. Also, I provided some images and code below (including my website).
Website:
https://runturtle.glitch.me/
Code:
#import url("https://fonts.googleapis.com/css2?family=Rubik&display=swap");
#fname {
margin-bottom: 10px;
}
h1 {
font-weight: bold;
color: #dde6d8;
}
* {
font-family: "Rubik";
user-select: none;
}
form {
margin: auto;
}
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: #a0a0a0;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type="number"] {
-moz-appearance: textfield;
}
h1 {
align-items: center;
}
h3 {
color: #dde6d8;
}
input {
margin: 0 auto;
border: none;
color: black;
background-color: rgb(white);
width: 50%;
height: 15px;
outline: none;
padding: 9px 10px;
border-radius: 4px;
}
button {
color: #183505;
border: none;
cursor: pointer;
padding: 5px 10px;
background-color: #4d7135;
outline: none;
border-radius: 4px;
}
button:hover {
opacity: 0.8;
}
button:active {
cursor: loading;
}
body {
margin: 0;
padding: 0;
background: #1f2f15;
font-family: ubuntu;
color: white;
}
header {
display: flex;
align-items: center;
background: #486b2c;
}
header img {
width: 50px;
background: white;
border-radius: 5px;
margin: 0 20px 0 40px;
}
.dashboard {
width: 150px;
height: 800px;
position: absolute;
left: 10px;
top: 81px;
}
.home {
opacity: 1;
width: 150px;
}
article {
background: #131b0b;
width: 50%;
margin: 20px auto;
border-radius: 10px;
padding: 10px;
}
hr,
article .date {
color: #a0a0a0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Run Turtle</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<img
src="https://cdn.glitch.com/1c916b3c-8432-490c-9650-264f03c95b9e%2Frss-icon.png?v=1630185994030"
width="50px"
/>
<h1><strong>Run Turtle</strong></h1>
</header>
<main>
<article class="dashboard">
<h1>Dashboard</h1>
<hr />
<button
onClick="window.location.href='https://runturtle.glitch.me';"
class="home"
>
Home
</button>
<br />
<br />
<button
onClick="window.location.href='register.html';"
class="register"
>
Register
</button>
</article>
<article>
<h1>Welcome to Run Turtle</h1>
<hr />
<p>
Welcome to Run Turtle. Navigate Run Turtle with the dashboared on the
left.
</p>
</article>
</main>
<script src="index.js"></script>
</body>
</html>
Here's an image of when the browser is resized:
You can use the Bootstrap Grid System for a responsive website. The layout is in the form of rows and columns that can be adjusted depending on the device size.
Here's the documentation link.
Personally, I like AMP (Accelerated Mobile Pages.) I myself use it for my site and it works good with page layouts.
AMP has a page on how to set up your HTML document to make a responsive mobile page. Here is the article
I suggest you to follow #media rule. CSS Grid Layout Module will help you to solve the arisen problem. For an example I have put a solution code.
screenshot_1 screenshot_2
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
header {
display: flex;
align-items: center;
background: #486b2c;
}
header img {
width: 50px;
background: white;
border-radius: 5px;
margin: 0 20px 0 40px;
}
.menu {
float: left;
width: 25%;
text-align: center;
}
.menu article {
background-color: #1f2215;
padding: 8px;
height: 800px;
margin-top: 7px;
display: block;
width: 100%;
color: black;
}
input {
margin: 0 auto;
border: none;
color: black;
width: 50%;
height: 15px;
outline: none;
padding: 9px 10px;
border-radius: 4px;
}
button {
color: #183505;
border: none;
cursor: pointer;
padding: 5px 10px;
background-color: #4d7135;
outline: none;
border-radius: 4px;
}
button:hover {
opacity: 0.8;
}
button:active {
cursor: loading;
}
body {
margin: 0;
padding: 0;
background: #1f2f15;
font-family: ubuntu;
color: white;
}
.main {
float: left;
width: 60%;
padding: 0 20px;
}
h1 {
font-weight: bold;
color: #dde6d8;
}
#media only screen and (max-width: 620px) {
.menu,
.main {
width: 100%;
}
.menu {
height: 200px;
}
.main {
background: #1f2f15;
height: 600px;
}
}
</style>
</head>
<body style="font-family:Verdana;">
<div>
<header>
<img src="https://cdn.glitch.com/1c916b3c-8432-490c-9650-264f03c95b9e%2Frss-icon.png?v=1630185994030"
width="50px" />
<h1><strong>Run Turtle</strong></h1>
</header>
</div>
<div>
<div class="menu">
<article>
<h1>Dashboard</h1>
<hr />
<button>
Home
</button>
<br />
<br />
<button>
Register
</button>
</article>
</div>
<div class="main">
<h1>Welcome to Run Turtle</h1>
<hr />
<p>
Welcome to Run Turtle. Navigate Run Turtle with the dashboared on the
left.
</p>
</div>
</div>
Hi I want to place my small image on exactly the same place than the text
So i'm able to achieve it but the image is a little bit up, and need to b moved a bit left.
Can you please assist?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.vertical-menu {
width: 200px;
border-radius: 10px;
border: 6px solid #4CAF50;
}
.vertical-menu a {
background-color: #eee;
color: black;
display: block;
padding: 12px;
text-decoration: none;
}
.vertical-menu a:hover {
background-color: #ccc;
}
.vertical-menu a.active {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<h1>Vertical Menu</h1>
<div class="vertical-menu">
Home
<img src="https://www.tsishipping.com/storage/app/media/_mediathumbs/interstate%20shipping%20new%20mexico-img-3-386af11858050a81cdd53b7b6eeabdb6.png" alt="Girl in a jacket" height="16" width="18">Link 100
Link 2
Link 3
Link 4
</div>
</body>
</html>
Use this.
img {
position: relative;
top: 3px;
}
I've updated your code. Try this.
.vertical-menu {
width: 200px;
border-radius: 10px;
border: 6px solid #4CAF50;
}
.vertical-menu a {
background-color: #eee;
color: black;
display: block;
padding: 8px;
text-decoration: none;
}
.vertical-menu a:hover {
background-color: #ccc;
}
.vertical-menu a.active {
background-color: #4CAF50;
color: white;
}
img {
position: relative;
top: 3px;
}
<h1>Vertical Menu</h1>
<div class="vertical-menu">
Home
<img src="https://www.tsishipping.com/storage/app/media/_mediathumbs/interstate%20shipping%20new%20mexico-img-3-386af11858050a81cdd53b7b6eeabdb6.png" alt="Girl in a jacket" height="16" width="18">Link 100
Link 2
Link 3
Link 4
</div>
I'm doing a site in Shopify and I'm using supply theme, I want to use my own menu instead of using Shopify menu. I wrote code in HTML and CSS but I was wondering if it is possible for someone to help me to change following code in liquid because my friend does not know any HTML and CSS and for him, it's easier to change it through the liquid.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content .header {
background: red;
padding: 16px;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="header">
<h2>Mega Menu</h2>
</div>
<div class="row">
<div class="column">
<h3>Category 1</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 2</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 3</h3>
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
<div style="padding:16px">
</div>
</body>
</html>
Even though I agree with drip's comment:
StackOverflow is not a "Write the code for me" platform.
Here is some helpful information, Liquid is templating language and there are many places to get you started with Liquid:
Shopify - Liquid reference
Shopify - Getting started Guide
Shopify Partners Blog - Learning Liquid
So i have created a horizontal navigation with a drop down menu, I've simply red what i saw and tried it myself. I've copied and pasted the html and css, I've changed the html in my lines of codes and it seems to work pretty well, now i would like to change the divs name to something more commun for mee since i am going to continue my html.
header {
border: 10px ridge blue
}
.container {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
.container a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
}
.container a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="collegecss.css" />
<title>college sainte marie </title>
</head>
<script type="text/javascript" src="collegejvs.js"></script>
<body>
<header>
<img src="../saintemarie.png">
<h1>
<titre>Bienvenue dans le site du Lycée Sainte-Marie</titre>
<h1>
</header>
<nav>
<div class="container">
accueil
<div class="dropdown">
<button class="dropbtn">information générale</button>
<div class="dropdown-content">
inscription
historique
accéder au collège
horaires
règlement
tarifs
</div>
</div>
calendrier
visite
pastorale
vie du collège
</div>
</body>
</html>
i would like to change the div class : "container","dropdown","dropbtn" and "dropdown-container".And at the same time, it would change the css class name as well
any suggestion? i'm using notepad++ .
thank you in advance!
You can try ATOM or Sublime Text. its available for free download. Open your files in any of these Editors. make your selection-pattern with simple selection method and use "CTRL + D" to select similar text as selection-pattern in whole file. Multiple cursors will appear and you can change the text.
Or Simple FIND & REPLACE can be used if it is solving your problem.
#user5014677 said :
I don't think this has naything to do with SO x) Anyway just copy paste everything in notepad and CTRL+F>replace> write the class you want to replace and the name of the new class > replace ALL
and it is right ^^ thank you #user5014677