How can i change the position of price in the following code?

How can i change the position of price in the following code? - javascript

After adding a position: fixed; to my header everything was in front of my header because they were using a position: absolute or position: relative I deleted them, and problem solved but now I want to change the position of price since I can not use a relative or absolute position because of this:
in this image price uses a relative position and header uses a fixed position but price is infront of the header so i decided to delete the position from price:
How can I change the position of price in the following code? For example I want to put it in bottom right without setting a position: absolute or position: relative.
Or if there is a better solution that can help me to put my content behind the fixed header without deleting the position property of contents what is it?
.header {
width: 100%;
height: 200px;
position: fixed;
background-color: darkcyan;
top: 0;
left: 0;
right: 0;
margin-top: 0;
margin-right: 0;
}
body {
margin-top: 333px;
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
margin-right: 0;
margin-left: 0;
margin-bottom: 0;
}
.footer {
background: darkslateblue;
margin-top: 100px;
height: 100px;
margin-right: 0px;
width: 100%;
}
.card {
max-width: 400px;
margin: auto;
text-align: center;
font-family: arial;
border-style: solid;
border-width: 6px;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 1em;
}
.card img {
height: 400px;
width: 400px;
vertical-align: middle;
}
.price {
background-color: #f44336;
font-size: 22px;
border-radius: 3px;
width: 131px;
padding: 5px;
}
.card button {
border: none;
color: white;
background-color: #000;
cursor: pointer;
width: 100%;
height: 100px;
font-size: 44px;
align-items: center;
}
.card button:hover {
opacity: .5;
background-color: #330;
}
#id {
background-color: saddlebrown;
color: white;
margin: 0;
font-size: 30px;
height: 310px;
}
.number {
width: 50px;
height: 50px;
background-color: #330;
color: yellow;
border-radius: 50%;
position: absolute;
top: -22px;
right: -22px;
justify-content: center;
align-items: center;
display: flex;
font-size: 22px;
}
#media (max-width: 1864px) {
.card {
max-width: 300px;
}
.price {
font-size: 20px;
}
.card img {
height: 300px;
width: 300px;
}
}
#media (max-width: 1319px) {
.grid {
grid-template-columns: 1fr 1fr 1fr;
}
}
<head>
<!-- <link rel="stylesheet" href="{% static 'main.css' %}"> -->
<div class="header">
<h1>header</h1>
</div>
</head>
<body style="background-color: #36454F;">
<div class="grid">
<!-- {% for i in p%} -->
<div class='card'>
<div class="number">{{i.Number}}</div>
<img src="{{i.image}}"></img>
<p id="id">{{i.description}}</p>
<a href="{{i.buy}}" target='_blank' rel='noopener noreferrer'>
<button><span class="price"> ${{i.price}}</span> buy</button>
</a>
</div>
<!-- {%endfor%} -->
</div>
<div class="footer">
<h1>hello</h1>
</div>
</body>

Add a z-index property in the header class.
.header{
width: 100%;
height: 200px;
position: fixed;
background-color: darkcyan;
top: 0;
left: 0;
right: 0;
z-index: 100;
margin-top: 0;
margin-right: 0;
}

Related

How to make my red circle always stays on the green line using html and css code?

I have a webpage like this:
Its code can be found here in JSFiddle
<div class="arrow">
<div class="line"></div>
<div class="triangle"></div>
</div>
<div id="warmup_container">
<p id="warmup_title">這是中文</p>
<div id="warmup_mark"></div>
<p id="warmup_text">some text </p>
</div>
:root {
--arrow-body-length: 500px;
--arrow-tip-length: 30px;
}
.arrow {
position: absolute;
top: 42%;
width: var(--arrow-body-length) + var(--arrow-tip-length);
}
.line {
margin-top: 11px;
width: var(--arrow-body-length);
background: green;
height: 9px;
float: left;
}
.triangle {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: var(--arrow-tip-length) solid green;
float: right;
}
#warmup_container {
height: 200px;
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
top: 8%;
}
#warmup_title {
text-align: center;
margin-top: 0px;
writing-mode: vertical-rl;
}
#warmup_mark {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
margin-top: 10px;
margin-bottom: -10px;
}
#warmup_text {
text-align: center;
width: 200px;
}
My problem is that when I add more characters into warmup_title, the red circle would not stay on the green line.
How can I change my code so that the red circle always stays on the green line no matter how many characters I type in warmup_title element?
The red circle might also not stay on the green line when I change the size of the window of my browser.

Try this:
:root {
--arrow-body-length: 500px;
--arrow-tip-length: 30px;
}
.arrow {
display: inline-flex;
position: absolute;
bottom: 40%;
width: var(--arrow-body-length) + var(--arrow-tip-length);
}
.line {
margin-top: 11px;
width: var(--arrow-body-length);
background: green;
height: 9px;
float: left;
}
.triangle {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: var(--arrow-tip-length) solid green;
float: right;
}
#warmup_container {
height: 200px;
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
top: 8%;
}
#warmup_title {
text-align: center;
margin-top: 0px;
writing-mode: vertical-rl;
}
#warmup_mark {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
margin-top: 10px;
margin-bottom: -10px;
z-index: 10;
}
#warmup_text {
text-align: center;
width: 200px;
}
<div id="warmup_container">
<p id="warmup_title">這是中文abc</p>
<div id="warmup_mark"></div>
<p id="warmup_text">some text </p>
<div class="arrow">
<div class="line"></div>
<div class="triangle"></div>
</div>
</div>

Your idea of fixing the green line is right, but it shouldn't use the top property, since the text can be extend, so it will break the visual. Instead make it bottom to anchor it at the end; also remove the height: 200px, add an outer div with position: relative to contain the absolute one.
About the breaking arrow when changing window size, i think make it width: 100% with a max-width to contain the width of it done better job than fixing it right away, so it can responsive with the screen size.
:root {
--arrow-body-length: calc(100% - 30px);
--arrow-tip-length: 30px;
}
.container {
position: relative;
}
.arrow {
position: absolute;
bottom: 35px;
width: var(--arrow-body-length) + var(--arrow-tip-length);
width: 100%;
max-width: 500px;
}
.line {
margin-top: 11px;
width: var(--arrow-body-length);
background: green;
height: 9px;
float: left;
}
.triangle {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: var(--arrow-tip-length) solid green;
float: right;
}
#warmup_container {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
#warmup_title {
text-align: center;
margin-top: 0px;
writing-mode: vertical-rl;
}
#warmup_mark {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
margin-top: 10px;
margin-bottom: -10px;
}
#warmup_text {
text-align: center;
width: 200px;
}
<div class="container">
<div class="arrow">
<div class="line"></div>
<div class="triangle"></div>
</div>
<div id="warmup_container">
<p id="warmup_title">這是中文abc def</p>
<div id="warmup_mark"></div>
<p id="warmup_text">some text </p>
</div>
</div>

Fitting text within parent div

I've been working on this for weeks and can't even seem to reproduce the problem in a consistent way.
I need to make sure the text in my buttons is as large as possible without extending outside of the parent div. I've tried 5-10 fitty/fitText type plug-ins and none of them are working properly, and the text either shrinks or expands way too big.
I've created this codepen to show the problem with it being too big:
https://codepen.io/TheNomadicAspie/pen/WNjRpOQ
I had to use an online link to jQuery and fitText. The weird thing is, if I copy the exact same code to JSfiddle, everything works perfectly:
https://jsfiddle.net/TheNomadicAspie/3yjw8kbt/7/
This is exactly how I want it to look, it's perfect. But when I run it in VS Code with a live server (Only difference being a local file instead of a link), it looks like the codepen and expands outside of the div:
I uploaded the fitText and jQuery links myself so I know they're the same version, and with the exact same code it doesn't work on Codepen or on my VS Code, but it does work on JS Fiddle. How can that be, and how can I make my code work the same way as it does on JS Fiddle?
Here's my code in case the Codepen or JS Fiddle changes.
<div id="screen" , class="screen">
<div id="menu_bar" , class="menu-bar">
<div id="logo" , class="logo">
<img src="logo.png" />
</div>
<div id="title" , class="title">Title</div>
<div id="menu_button" , class="menu-button">
<img src="menu.png" />
</div>
</div>
<div id="display" , class="display">
<div id="speech_bubble" , class="speech-bubble">
<div id="logo_animation" , class="logo-animation"><img src="https://media2.giphy.com/media/E0SE1bDv0sTbCH4p6V/giphy.gif?cid=790b761143fe1cebe2466c26bfb82fc6b178eb7ecad3874e&rid=giphy.gif"/></div>
<div id="question" class="question resize">
<div id="question_text" class="question-text">
<span>This is some test text</span>
</div>
</div>
<div id="speech_bubble_middle_bar" class="speech-bubble-middle-bar">
<input type="text" id="input-text" class="input-text" />
</div>
<div id="speech_bubble_bottom_bar" class="speech-bubble-bottom-bar">
<div id="left" class="left-button-container">
<button id="left_button" class="button resize">Wow!</button>
</div>
<div id="right_button_container" class="right-button-container">
<button id="right_button" class="button resize">Next</button>
</div>
</div>
</div>
<div id="bottom_bar" , class="bottom-bar">
<div id="character" , class="character">
</div>
<div id="bottom_display" , class="bottom-display">
<div id="answers_display" , class="answers-display">
<div id="answer_container_1" , class="answer-button-1">
<div id="answer_checkbox_1" , class="checkbox">
</div>
<div id="answer_button_container_1" , class="answer-button-container">
<button id="answer_button_1" , class="button pushable resize">
<span class="front">Super long button times four five six seven</span>
</button>
</div>
</div>
<div id="answer_container_2" , class="answer-button-2">
<div id="answer_checkbox_2" , class="checkbox">
</div>
<div id="answer_container_2" , class="answer-button-container">
<button id="answer_button_2" , class="button pushable resize">
<span class="front">Button 2</span>
</button>
</div>
</div>
<div id="answer_container_3" , class="answer-button-3">
<div id="answer_checkbox_3" , class="checkbox">
</div>
<div id="answer_container_3" , class="answer-button-container">
<button id="answer_button_3" , class="button pushable resize">
<span class="front">Button 3</span>
</button>
</div>
</div>
<div id="answer_container_4" , class="answer-button-4">
<div id="answer_checkbox_4" , class="checkbox">
</div>
<div id="answer_container_4" , class="answer-button-container">
<button id="answer_button_4" , class="button pushable resize">
<span class="front">Button 4</span>
</button>
</div>
</div>
</div>
<div id="menu_display" , class="menu-display">
<div id="menu_container_1" , class="menu-button-1">
<div id="menu_button_container_1" , class="menu-button-container">
<button id="menu_button_1" , class="button resize">Restart</button>
</div>
</div>
<div id="menu_container_2" , class="menu-button-2">
<div id="menu_button_container_2" , class="menu-button-container">
<button id="menu_button_2" , class="button resize">Options</button>
</div>
</div>
<div id="menu_container_3" , class="menu-button-3">
<div id="menu_button_container_3" , class="menu-button-container">
<button id="menu_button_3" , class="button resize">More Info</button>
</div>
</div>
<div id="menu_container_4" , class="menu-button-4">
<div id="menu_button_container_4" , class="menu-button-container">
<button id="menu_button_4" , class="button resize">Log out</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://filebin.net/ykl05vxy49xx5vxp/jquery.min.js"></script>
<script src="https://filebin.net/ykl05vxy49xx5vxp/jquery.fittext.js"></script
* {
-webkit-box-sizing: border-box;
-mo-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
position: fixed;
height: 100%;
background-color: #311049;
font-size: 2vh;
margin: 0 auto;
}
.screen {
position: absolute;
height: 100%;
}
.menu-bar {
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
position: relative;
height: 13.714%;
width: 100vw;
top: 0%;
text-align: center;
}
.logo {
grid-column: 1/2;
position: relative;
height: 100%;
}
.logo img {
position: absolute;
height: auto;
max-height: 95%;
max-width: 95%;
left: 50%;
right: 50%;
top: 50%;
bottom: 50%;
transform: translate(-50%, -50%);
}
.title {
grid-column: 2/3;
position: relative;
color: #f5f5f5;
height: 100%;
width: 100%;
margin: 0 auto;
text-align: center;
justify-content: center;
align-items: center;
font-family: hack;
font-size: clamp(2vw, 8vw, 10vh);
display: flex;
top: 0%;
}
.menu-button {
grid-column: 3/4;
position: relative;
height: 100%;
}
.menu-button img {
position: absolute;
height: auto;
max-height: 75%;
max-width: 75%;
left: 50%;
right: 50%;
top: 50%;
bottom: 50%;
transform: translate(-50%, -50%);
}
.display {
position: relative;
height: 86.286%;
width: 100vw;
}
.speech-bubble {
display: grid;
grid-template-rows: 60% 20% 20%;
position: relative;
background-color: #f5f5f5;
height: 61.8%;
width: 90vw;
margin: auto;
border-radius: 2em;
z-index: 10;
padding-bottom: 1em;
}
.speech-bubble:after {
content: '';
position: absolute;
bottom: 0;
left: 15vw;
width: 0;
height: 0;
border: 4em solid transparent;
border-top-color: #f5f5f5;
border-bottom: 0;
margin-left: -2em;
margin-bottom: -2em;
z-index: -1;
}
.logo-animation {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 10%;
padding-top: 10%;
padding-left: 10%;
padding-right: 10%;
display: none;
}
.logo-animation img {
height: 100%;
object-fit: contain;
margin-left: auto;
margin-right: auto;
}
.question {
grid-rows: 1/2;
position: relative;
font-size: 3vh;
padding-left: 0.5em;
padding-right: 0.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.question-text {
height: 100%;
width: 100%;
overflow: auto;
}
.speech-bubble-middle-bar {
grid-rows: 2/3;
padding-left: 1%;
padding-right: 1%;
padding-top: 1%;
padding-bottom: 1%;
}
.input-text {
visibility: hidden;
width: 100%;
height: 100%;
border-radius: 2.5em;
border: 0.25em solid black;
padding: 1%;
font-size: 2em;
text-align: center;
}
.speech-bubble-bottom-bar {
grid-rows: 3/4;
display: grid;
grid-template-columns: 50% 50%;
position: relative;
width: 100%;
}
.left-button-container {
position: absolute;
height: 100%;
width: 38.2%;
left: 0%;
margin-left: 1em;
}
.left-button-container button {
width: 100%;
font-size: 2em;
}
.right-button-container {
position: absolute;
height: 100%;
width: 38.2%;
right: 0%;
margin-right: 1em;
}
.right-button-container button {
width: 100%;
font-size: 2em;
}
.bottom-bar {
display: grid;
grid-template-columns: 38.2% 61.8%;
position: relative;
height: 38.2%;
width: 100vw;
bottom: 0%;
}
.character {
grid-columns: 1/2;
position: relative;
background-image: url('character.png');
background-size: contain;
background-repeat: no-repeat;
background-position-y: bottom;
background-position-x: center;
margin-left: 4%;
margin-right: 4%;
margin-top: 3em;
}
.character img {
position: absolute;
max-height: 80%;
max-width: 90%;
bottom: 0%;
margin-left: 4%;
margin-right: 4%;
}
.bottom-display {
grid-columns: 2/3;
position: relative;
height: 100%;
padding-right: 5vw;
padding-top: 1%;
padding-bottom: 3%;
}
.answers-display {
display: grid;
gap: 1%;
height: 99%;
max-height: 99%;
grid-template-columns: repeat(auto-fill, minmax(clamp( 28vw, 45vmin, 35vw ), 1fr));
grid-auto-rows:1fr;
height:100%;
}
.menu-display {
display: grid;
grid-auto-rows:1fr;
grid-template-columns: repeat(auto-fill, minmax(clamp( 28vw, 45vmin, 35vw ), 1fr));
height: 100%;
gap: 1%;
display: none;
}
.answer-button-1 {
grid-rows: 1/2;
display: grid;
grid-template-columns: 20% 80%;
height: 98%;
}
.answer-button-2 {
grid-rows: 2/3;
display: grid;
grid-template-columns: 20% 80%;
height: 98%;
}
.answer-button-3 {
grid-rows: 3/4;
display: grid;
grid-template-columns: 20% 80%;
height: 99%;
}
.answer-button-4 {
grid-rows: 4/5;
display: grid;
grid-template-columns: 20% 80%;
height: 99%;
}
.checkbox {
grid-columns: 1/2;
max-height: 90%;
background-image: url('checkbox_unchecked.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
background-image: none;
}
.answer-button-container {
grid-columns: 2/3;
padding-left: 5%;
height: 100%;
}
.answer-button-container button {
width: 100%;
padding-left: 5%;
padding-right: 5%;
padding-top: 2%;
padding-bottom: 2%;
}
.menu-button-container button {
width: 100%;
padding-left: 5%;
padding-right: 5%;
padding-top: 2%;
padding-bottom: 2%;
}
.menu-button-container {
padding-left: 5%;
height: 100%;
}
.menu-button-1 {
grid-rows: 1/2;
height: 98%;
}
.menu-button-2 {
grid-rows: 2/3;
height: 98%;
}
.menu-button-3 {
grid-rows: 3/4;
height: 99%;
}
.menu-button-4 {
grid-rows: 4/5;
height: 99%;
}
.button {
position: relative;
display: inline-block;
height: 100%;
width: 100%;
background-color: #311049; /*Button Color*/
color: #f5f5f5;
font-family: hack;
font-size: 1.5rem;
font-size: clamp(1rem, 3vw, 2rem);
border-radius: 20px;
text-decoration: none;
padding: 0.2em;
box-shadow: 0.1em 0.2em black;
transition: 0.2s;
}
.button:hover:active {
transition: 0.1s;
box-shadow: 0.01em 0.02em black;
transform: translate(0.05em, 0.1em);
}
.button:hover {
box-shadow: 0.06em 0.12em black;
transform: translate(-0.01em, -0.02em);
}
.left-btn::after {
display: block;
color: #f5f5f5;
line-height: 0.5em;
content: "\2190";
}
.right-btn::after {
display: block;
color: #f5f5f5;
line-height: 0.5em;
content: "\2192";
}
const left_button = document.getElementById('left_button')
const right_button = document.getElementById('right_button')
const answer_button_1 = document.getElementById('answer_button_1')
const answer_button_2 = document.getElementById('answer_button_2')
const answer_button_3 = document.getElementById('answer_button_3')
const answer_button_4 = document.getElementById('answer_button_4')
var answer_button_dict = {
'1': answer_button_1,
'2': answer_button_2,
'3': answer_button_3,
'4': answer_button_4,
'left': left_button,
'right': right_button
}
Object.values(answer_button_dict).forEach(button => {
jQuery(button).fitText()
})

Remove your fitting script (it's not working in your JS fiddle anyway, works just on codepen), remove font-size from .left-button-container button and .right-button-container button, set .button from font-size: clamp(1rem, 3vw, 2rem); to font-size: clamp(1rem, 6vh, 3rem);
You are trying to rely on page width for button width and to rely on page height for button and its text height - just test more screen sizes and play with font-size: clamp part

Why the does the ul in this nav not come after the previous div?

The ul tag does not come after the previous div in the same line, (the one with the class Logo).
I want to show the ul tag after the logo tag, in the same line. However, the ul goes under the line that I want to show it in.
body {
margin: 0px;
direction: rtl;
}
header {
width: 100%;
min-height: 700px;
height: auto;
overflow: auto;
background-color: #007bff;
}
nav {
margin-top: 0px;
height: 50px;
}
nav ul {
width: 60%;
height: 50px;
margin: 0px auto;
border: 2px solid black;
}
.Logo {
width: 160px;
height: 50px;
margin-left: 0px;
margin-right: 30px;
margin-top: 100px;
margin-bottom: 0px;
}
.Logo img {
width: 100%;
height: 100%;
}
<body>
<header>
<nav>
<div class="Logo"><img src="Content/img/logo.png" alt="جاب بورد"></div>
<ul></ul>
<div></div>
<div></div>
</nav>
</header>
</body>

ul and div elements are block-level, meaning they take 100% width and will stack on top.
In order to have them beside each other you will need to use floats, inline-block, flexbox, or grid.
I would suggest flexbox for this case.
Add display: flex to the direct parent element
body {
margin: 0px;
direction: rtl;
}
header {
width: 100%;
min-height: 700px;
height: auto;
overflow: auto;
background-color: #007bff;
}
nav {
margin-top: 0px;
height: 50px;
display: flex;
}
nav ul {
width: 60%;
height: 50px;
margin: 0px auto;
border: 2px solid black;
}
.Logo {
width: 160px;
height: 50px;
margin-left: 0px;
margin-right: 30px;
margin-top: 100px;
margin-bottom: 0px;
}
.Logo img {
width: 100%;
height: 100%;
}
<body>
<header>
<nav>
<div class="Logo"><img src="Content/img/logo.png" alt="جاب بورد"></div>
<ul><li>List Here</li></ul>
</nav>
</header>
</body>

just add display:inline-block to both the logo and the ul
body {
margin: 0px;
/* direction: rtl; */
}
header {
width: 100%;
min-height: 700px;
height: auto;
overflow: auto;
background-color: #007bff;
}
nav {
margin-top: 0px;
height: 50px;
}
nav ul {
width: 60%;
height: 50px;
margin: 0px auto;
border: 2px solid black;
display:inline-block;
}
.Logo {
width: 160px;
height: 50px;
margin-left: 0px;
margin-right: 30px;
margin-top: 100px;
margin-bottom: 0px;
display:inline-block;
}
.Logo img {
width: 100%;
height: 100%;
}
<body>
<header>
<nav>
<div class="Logo"><img src="Content/img/logo.png" alt="جاب بورد"></div>
<ul></ul>
<div></div>
<div></div>
</nav>
</header>
</body>

flexbox is really the way to go. You need to add margin-top:100px to the ul
body {
margin: 0px;
direction: rtl;
}
header {
width: 100%;
min-height: 700px;
height: auto;
overflow: auto;
background-color: #007bff;
}
nav {
margin-top: 0px;
height: 50px;
display: flex;
}
nav ul {
width: 60%;
height: 50px;
margin: 0px auto;
border: 2px solid black;
margin-top:100px;
}
.Logo {
width: 160px;
height: 50px;
margin-left: 0px;
margin-right: 30px;
margin-top: 100px;
margin-bottom: 0px;
}
.Logo img {
width: 100%;
height: 100%;
}
<body>
<header>
<nav>
<div class="Logo"><img src="Content/img/logo.png" alt="جاب بورد"></div>
<ul><li>List Here</li></ul>
</nav>
</header>
</body>

When I scale down the page, the box for the class "rcorners2" goes off the page at some parts. How do I fix this so it scales down smoothly?

The expected result is for the box to scale
down and fit into the center of the page
without going off the side of the page.
However, the actual result is that it goes off
the side of the page when I scale down to some
sizes. I don't really want to add in another
screen size because I feel that the ones I have
already should be adequate. Can anyone help
with a solution for this issue, thanks.
html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-
width,
initial-scale=1.0">
<title>Student Hacks</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="img/pencil.png">
</head>
<body class="grid">
<header>
<img class="logo" href="index.html" src="img/student-hacks-logo.png" alt="Logo">
</header>
<div class="menu" id="menu-toggle"></div>
<nav id="menu-nav">
<a class="home" href="index.html">HOME</a>
<a class="money" href="money.html">MONEY</a>
<a class="study" href="study.html">STUDY</a>
<a class="faqs" href="faqs.html">FAQs</a>
</nav>
<main>
<div class="container">
<img src="img/moneysaving.jpg" alt="image of money">
<div class="text">Money Tips & Tricks</div>
</div>
<div class="animation"></div>
<h2 class="heading">Ways To Save Money</h2>
<hr class="index-hr-1">
<h3>Evening Shopping!</h3>
<p class="rcorners2">Shop in the evenings, this way
there will be a lot more discounted items. There are
sometimes dedicated shopping isles for discounted
items.</p>
<h3>Student Discounts!</h3>
<p class="rcorners2">UniDays and NUS are great ways
to save money. They provide student discount cards
that are compatible with many stores and restaurants.</p>
<h3>Travel Cards!</h3>
<p class="rcorners2">Purchase a 16-25 railcard to travel for
discounted prices. If you have a 123 Student Bank Account
with santander, you get the card for free!</p>
<h3>Budget, Budget, Budget!</h3>
<p class="rcorners2">When you receive your student loan,
start budgeting it out on essentials. Budget food, books,
rent,bills, etc. This lets you know where all your money
is going.</p>
</main>
<footer class="footer">
<p class="footer-writing">Student Hacks© 2018</p>
</footer>
<script src="js/scripts.js"></script>
</body>
</html>
css:
body {
margin: 0;
padding: 0;
width: 100%;
font-family: "Courier New", Courier,
monospace;
font-weight: normal;
font-size: 1rem;
color: black;
}
html {
margin: 0;
padding: 0;
width: 100%;
}
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"header"
"menu"
"content"
"footer";
}
header {
grid-area: header;
background: #e5e5e5;
height: 100px;
}
.logo {
width: 350px;
height: 90px;
margin: auto;
display: block;
}
nav {
grid-area: menu;
justify-content: center;
flex-direction: row;
}
nav a {
padding: 0;
color: black;
background: #bfbfbf;
text-decoration: none;
transition: all 0.5s;
width: 100%;
text-align: center;
float: right;
}
nav a:hover {
color: #dfd;
background: #7d8687;
}
.home {
height: 3vh;
}
.money {
height: 3vh;
}
.study {
height: 3vh;
}
.faqs {
height: 3vh;
}
main {
grid-area: content;
/* increasing the height of one element increases all row heights */
background-color: #e5e5e5;
}
h3 {
text-align: center;
}
.container img {
width: 100%;
height: 200px;
}
.text {
color: #94FCDD;
font-size: 30px;
font-weight: bold;
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
text-shadow: 4px 2px 2px #000;
}
footer {
grid-area: footer;
background-color: #CDCDCD;
position: sticky;
bottom: 0;
left: 0;
right: 0;
height: 50px;
}
.footer-writing {
text-align: center;
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
text-align: center;
}
.heading {
text-align: center;
font-size: 3rem;
}
.faq-hr-1 {
/* border: dashed 1.5px;
width: 35%;
margin-bottom: 75px;
margin-top: 35px; */
height: 10px;
border: 0;
margin-bottom: 30px;
margin-top: 5px;
box-shadow: 0 10px 10px -10px #8c8b8b inset;
}
.index-hr-1 {
height: 10px;
border: 0;
margin-bottom: 30px;
margin-top: 5px;
box-shadow: 0 12px 12px -10px #8c8b8b inset;
}
.about-us-text {
text-align: center;
font-size: 1.2rem;
margin-left: 25px;
margin-right: 25px;
}
ul {
list-style-type: none;
display: table;
width: 90%;
border-spacing: 0 10px;
}
li {
display: table-row;
}
li strong, li .txt, li .langs {
display: table-cell;
vertical-align: middle;
}
img {
display: table-cell;
padding-right: 10px;
}
li .txt {
width: 60%;
padding-right: 10px;
}
li:nth-child(even) {
background: #eee;
}
.wiki-label {
text-align: center;
font-size: 1em;
margin-left: 10%;
}
.submit-btn {
margin-left: 2%;
}
.rcorners2 {
border-radius: 35px;
border: 5px solid #94FCDD;
margin-left: 20%;
margin-right: 40%;
padding: 20px;
width: 200px;
height: 115px;
font-size: 0.9rem;
text-align: center;
}
#media screen and (min-width: 500px) {
/* applies to screens wider than 499px */
body {
background: #e5e5e5;
}
.grid {
grid-template-columns: 1fr 1fr 1fr;
/*grid-template-rows: 1fr 1fr 1fr 1fr;*/
/*or set the rows to 'view height (vh)'*/
grid-template-areas:
"header header header"
"menu menu menu"
"content content content"
"footer footer footer";
}
nav {
display: flex;
flex-direction: row;
line-height: 1.5em;
}
nav a:hover {
color: #dfd;
background: #7d8687;
}
.logo {
width: 400px;
height: 150px;
}
.container img {
width: 100%;
height: 400px;
}
.text {
color: #94FCDD;
font-size: 30px;
font-weight: bold;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
text-shadow: 4px 2px 2px #000;
}
header {
height: 150px;
}
.rcorners2 {
border-radius: 35px;
border: 5px solid #94FCDD;
padding: 10px;
margin-left: 20%;
margin-right: 20%;
width: 400px;
height: 145px;
font-size: 1.2rem;
text-align: center;
font-weight: bold;
}
/* DESKTOP STYLES */
#media screen and (min-width: 1000px) {
/* applies to screens wider than 999px */
body {
background: white;
}
.grid {
grid-template-columns: 1fr 1fr 1fr;
/*grid-template-rows: 1fr 1fr 1fr 1fr;*/
/*or set the rows to 'view height (vh)'*/
grid-template-areas:
"header header header"
"menu menu menu"
"content content content"
"footer footer footer";
}
.rcorners2 {
border-radius: 35px;
border: 5px solid #94FCDD;
padding: 10px;
margin-left: 20%;
margin-right: 40%;
width: 800px;
height: 70px;
font-size: 1.2rem;
text-align: center;
}
.container img {
width: 100%;
height: 600px;
}
.text {
color: #94FCDD;
font-size: 30px;
font-weight: bold;
position: absolute;
top: 52%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
text-shadow: 4px 2px 2px #000;
}

I see you are using media queries, this is great. However you have a typo. You opened the media queries but never closed them.
example:
#media screen and (min-width: 1000px) {
body {
background: white;
}
**}**
don't forget to close your media queries.
Also inspect in the browser where these errors are happening and you could always add more Media queries to remedy the situation. good luck!

Resizing of a Absolute Positioned Element

The Element is not resizing and browser is not re-calculating the position of the Element even though all the widths and heights are mentioned in percentages only. This code basically renders a Squared DIV with Two elements one with Centered and another at right top corner of the SQuare.
<html>
<head>
<style>
.board {
font-size: 8em;
}
.cellContainerOuter {
width: 100%;
padding-bottom: 100%;
position: relative;
background-color: yellow;
border: 1px solid black;
}
.cellContainer {
width: 100%;
padding-bottom: 100%;
position: absolute;
display: table;
}
.cellContainerInner {
padding-bottom: 50%;
padding-top: 50%;
padding-left: 50%;
padding-right: 50%;
position: relative;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.text {
border: 0px dotted white;
position: absolute;
bottom: 20%;
top: 20%;
left: 20%;
right: 20%;
overflow: hidden;
text-overflow: clip;
display: block;
}
.weight {
position: absolute;
right: 0px;
top: 0px;
margin: 2px;
border: 1px solid white;
}
</style>
</head>
<body>
<div class="board">
<div id="cell3_C_1" class="cellContainerOuter" title="ఇ">
<div id="cell2_C_1" class="cellContainer" title="ఇ">
<div id="cell_C_1" class="cellContainerInner" title="ఇ">
<span id="weight_C_1" class="weight" title="6">6</span>
<span id="text_C_1" class="text" title="ఇ">ఇ</span>
</div>
</div>
</div>
</div>
</body>
</html>
Any help to resolve this issue is highly appreciated.
CodePen: https://codepen.io/mdileep/full/MGrNgw/

Refactored your CSS.
Let me know if this is the behaviour you are expecting.
OR with responsive you mean to change your height of 6 as well?
body {
margin: 0;
}
.cellContainer {
position: relative;
background: yellow;
width: calc(100vw - 20px);
height: calc(100vh - 20px);
margin: 10px;
}
.cellContainerInner {
border: 1px solid;
height: 100%;
display: flex;
}
.weight {
font-size: 8em;
position: absolute;
right: 0px;
top: 0px;
border: 1px solid;
}
.text {
flex: 1;
font-size: 8em;
/* border:2px solid; */
align-self: center;
text-align: center;
}
<div class="board">
<div id="cell3_C_1" class="cellContainerOuter" title="ఇ">
<div id="cell2_C_1" class="cellContainer" title="ఇ">
<div id="cell_C_1" class="cellContainerInner" title="ఇ">
<span id="weight_C_1" class="weight" title="6">6</span>
<span id="text_C_1" class="text" title="ఇ">ఇ</span>
</div>
</div>
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

How can i change the position of price in the following code? - javascript

Add a z-index property in the header class. .header{ width: 100%; height: 200px; position: fixed; background-color: darkcyan; top: 0; left: 0; right: 0; z-index: 100; margin-top: 0; margin-right: 0; }

Related

How to make my red circle always stays on the green line using html and css code?

Fitting text within parent div

Why the does the ul in this nav not come after the previous div?

When I scale down the page, the box for the class "rcorners2" goes off the page at some parts. How do I fix this so it scales down smoothly?

Resizing of a Absolute Positioned Element

Categories

Resources