Unable to make responsive aligment

Unable to make responsive aligment - javascript

Screenshot (The layout i look for) :
My codes
body {
background: #000000 50% 50%;
overflow-x: hidden;
overflow-y: hidden;
}
.video{
margin: 50px 20px;
display: grid;
place-items: center;
height: 80vh;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimal-ui">
</head>
<body>
<div class="container">
<div class="left">
<p style="color: blue;">Title</p>
<img src="https://place-hold.it/336x280" /> <br>
<p style="color: blue;">Title</p>
<img src="https://place-hold.it/280x500" />
</div>
<div class="video">
<p style="color: blue;">Title</p>
<img src="https://place-hold.it/500x500" />
</div>
<div class="right">
<p style="color: blue;">title</p>
<img src="https://place-hold.it/336x280" /> <br>
<p style="color: blue;">Title</p>
<img src="https://place-hold.it/280x500" />
</div>
</div>
</body>
My current code : Works fine with large desktop, big screen and resolution
But,
When i check it with small desktop, mobile and small resolution screen, than the layout getting missed up.
How to i make this responsive?

Removed most of the code from your CSS and used flex-wrap to wrap the divs if screen shrinks and added a justify-content:space-between for the space.
Change:added button inside video div since video itself is a div i gave it display:flex and changed the flex-direction:column align-items to center them and gap:30px between p img button
body {
background: #000000 50% 50%;
}
.container {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.video {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
}
.vid-btn {
padding: 20px 150px;
}
<div class="container">
<div class="left">
<p style="color: blue;">Title</p>
<img src="https://place-hold.it/336x280" /> <br>
<p style="color: blue;">Title</p>
<img src="https://place-hold.it/280x500" />
</div>
<div class="video">
<p style="color: blue;">Title</p>
<img src="https://place-hold.it/500x500" />
<button class="vid-btn">Button</button>
</div>
<div class="right">
<p style="color: blue;">Title</p>
<img src="https://place-hold.it/336x280" />
<p style="color: blue;">Title</p>
<img src="https://place-hold.it/280x500" />
</div>
</div>

Related

How to align images and text together in a grid format

I have a profile image with a text next to it. I'm trying to format it in such a way, that there is a profile image with a text next to it which follows that in a grid format.
I'm not really handy in CSS, so aligning items is not really my thing XD. Any help would be appreciated.
Here's the html code.
<div class="col-sm-3">
<div class="cardearnings" style="height:89%;">
<div class="card-body">
<h2 class="card-title">Activity</h2>
<div class="contents">
<img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg" style="width:70px; height:70px;" class="image--cover"><i>Someone followed you</i>
<img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg" style="width:70px; height:70px;" class="image--cover"><i>Me followed you</i>
</div>
</div>
</div>
</div>
Heres the CSS
.image--cover {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
object-position: center right;
}
This is how it currently looks

Adding to above answer. We can also use flexbox property of CSS in order to achieve such layout.
Please follow below code snippets for reference:
<!DOCTYPE html>
<html>
<head>
<!-- CSS style -->
<style>
.container1 {
display: flex;
}
.container2 {
display: flex;
}
p {
margin-left: 10px;
}
img {
margin-top: 5px;
}
</style>
</head>
<body>
<div class="container1">
<img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg"
style="width:70px;
height:70px;" class="image--cover">
<p> Someone followed you </p>
</div>
<div class="container2">
<img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg"
style="width:70px;
height:70px;" class="image--cover">
<p> Me followed you </p>
</div>
</body>
</html>
References:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/#background
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

If i undesrtand you correctly:
.card-body {
display: grid;
justify-items: center;
}
.contents {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 1em;
}
.image--cover {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
object-position: center right;
}
<div class="col-sm-3">
<div class="cardearnings" style="height:89%;">
<div class="card-body">
<h2 class="card-title">Activity</h2>
<div class="contents">
<img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg" style="width:70px; height:70px;" class="image--cover">
<i>Someone followed you</i>
<img src="https://i.kinja-img.com/gawker-media/image/upload/gd8ljenaeahpn0wslmlz.jpg" style="width:70px; height:70px;" class="image--cover">
<i>Me followed you</i>
</div>
</div>
</div>
</div>

my pop up window is opened the top of page

enter image description hereenter image description hereI created a webpage by using html css and javascript. In home page, I added a pop up contact button and form, it is working but pop up window is opened at the top of page. Home page is like one page you scroll. I added the button to the footer but form is opened close to header. I want to it to open while user see the end of the page. I hope I can clear the problem.
https://github.com/ipeksaygut/website in this link there are HTML- CSS-JS files of only home page.
I am really beginner, I really do not understand the problem. Thanks for helps!
-If something need let me know to sahre to clear problem!
Window is seen as the picture but ı want to see it at the end of page I added photo of window how it is seen and where ı want to see it.

Hi Ipek Saygut!
I put together this code that will give you an idea of what was going on with your css. I have modified the .popUp class in order to fix this issue. Please be aware that you will need to read more on HTML and CSS best practices. Please have a look at this article to get you started in the amazing world of HTML and CSS, don't worry, it takes practice but you will master it soon. HTML & CSS Best Practices.
I certainly hope this code helps, have a good time coding, fellow!
let btn = document.querySelector("button");
let cont = document.querySelector(".popUp");
btn.addEventListener('click', function(){
cont.id = "show";
});
cont.addEventListener('click', function(e){
if(e.target == this){
this.id = "hidden";}
e.preventDefault;
});
body {
font-family: 'Red Hat Display', sans-serif;
}
.footer {
border-top: 5px solid #00acc8;
height: 200px;
background-color: #000;
padding: 50px;
margin: auto;
}
.container {
justify-items: left;
align-items: bottom;
z-index: 2;
padding-top: 55px;
padding-left: 18px;
}
button {
width: 140px;
height: 60px;
font-size: 16px;
font-weight: bold;
color: #2e9ca5;
border: 2px solid #2e9ca5;
border-radius: 5px;
background: white;
transition: all 0.5s ease;
cursor: pointer;
}
button:hover {
background: #2e9ca5;
color: white;
}
#show {
visibility: visible;
animation: pop 0.5s ease-in;
}
#keyframes pop {
from {
opacity: 0;
visibility: hidden;
}
to {
opacity: 1;
visibility: visible;
}
}
#hidden {
animation: out 0.5s ease-out;
}
#keyframes out {
from {
opacity: 1;
visibility: visible;
}
to {
opacity: 0;
visibility: hidden;
}
}
.popUp::before {
content: "x";
font-size: 30px;
color: #8FC1C1;
position: fixed;
right: -35px;
top: 4px;
}
.popUp {
display: block;
margin-top: 5% !important;
background: rgba(0, 0, 0, 0);
width: 50%;
height: 100%;
position: fixed;
top: 50%;
left: 50%;
z-index: 99999;
transform: translate(-50%, -50%);
justify-items: center;
align-items: center;
visibility: hidden;
}
form {
display: flex;
flex-direction: column;
width:85%;
margin:0 auto;
grid-template-columns: 150px;
grid-template-rows: repeat(10, 30px);
grid-row-gap: 10px;
background: white;
padding: 30px;
border-radius: 5px;
border: 1px solid #2e9ca5;
}
input,
textarea {
border-radius: 3px;
border: 1px solid #f2f2f2;
padding: 0 6px;
}
input[type=text],
input[type=email] {
height: 30px;
}
input[type=textarea] {}
input[type=submit] {
height: 30px;
background: #2e9ca5;
color: white;
font-weight: bold;
transition: background 0.3s ease;
border: 0;
border-radius: 5px;
}
input[type=submit]:hover {
background: white;
color: #2e9ca5;
}
.remove {
justify-content: end;
align-items: end;
}
label {
color: #b3b3b3;
}
<!DOCTYPE html>
<html>
<head>
<title>Discover To Istanbul</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href='https://fonts.googleapis.com/css?family=Roboto&display=swap'>
<link href="https://fonts.googleapis.com/css?family=Parisienne&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght#400;900;600&display=swap" rel="stylesheet">
</head>
<body>
<div class="menu-bar">
<div class="menu-banner">istanbul</div>
<div class="menu-button">
<ul>
<li>HOME</li>
<li>DESTINATIONS</li>
<li>GALLERY</li>
</ul>
</div>
</div>
<script src="js/main.js" type="text/javascript" defer></script>
<div class="main-header">
<center>
<div class="header-tab">
<h1>İSTANBUL</h1>
<div class="header-alt">Let's Go On The Adventure with us !</div>
<div class="header-alt2"> EXPLORE ISTANBUL </div>
</div>
<div class="header-tab-video">
<header>
<video autoplay="" style="filter:contrast(1.099) brightness(0.92)" preload="none" muted="" loop="" width="780" height="560">
<source src="image/video.mp4" type="video/mp4">
</video>
<div id="overlay">
<p>Istanbul is <span class="typed-text" ></span></p>
</div>
</header>
</div>
</center>
</div>
<a name="anc2">
<div name="#anc2" class="places" id="sacred">
</a>
<h1>sacred places</h1>
<h5>explore most impressive sacred places with us.</h5>
<h6> discover more</h6>
</div>
<div class="places" id="palaces">
<h1 id="flt-rght"> palaces</h1>
<h5 id="flt-rght">explore most attractive palaces with us.</h5>
<a href="html/palaces/palaces.html">
<h6>discover more</h6>
</a>
</div>
<div class= "places" id="oldbuildings">
<h1>old buildings</h1>
<h5>Explore breathtaking and beautiful buildings with us.</h5>
<a href="html/oldbuildings/oldbuildings.html">
<h6>discover more</h6>
</a>
</div>
<div class="galeri">
<h1><a name="anc3" style="text-decoration:none;">#discoverTurkey</a></h1>
<h2>VIDEO <font color=red>|</font> PHOTO </h2>
<div class="galeri-alt">
<div class="galeri-ic" id="galeri1"></div>
<div class="galeri-ic" id="galeri2"><img src="image/play-button1.png"></div>
<div class="galeri-ic" id="galeri3"></div>
<div class="galeri-ic" id="galeri4"></div>
<div class="galeri-ic" id="galeri5"><img src="image/play-button1.png"></div>
<div class="galeri-ic" id="galeri6"></div>
</div>
</div>
<div class="kayangörseller"
<center><p style="font-size:60px""font-family:Calluna;">Social Media</p></center>
<div class="images">
<marquee direction="right" scrollamount="7">
<a href="https://www.instagram.com/p/CI3iV5yr416/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/galata.jpg" style="width:400px;height:400px;"> </a>
<a href="https://www.instagram.com/p/CI3huz5LGDw/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/c.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3h9xCLXPy/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/ayasofya.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3iMZXLZy9/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/fenerrum.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3iaZlLn-N/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/kapalicarsi.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3iikbrmdw/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/sultanahmet.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3isMKLXrS/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/taksimanit.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3i9RALySO/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/yerebatan.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3xiRiryIn/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/a.jpg" style="width:400px;height:400px;">
<a href="https://www.instagram.com/p/CI3i1EWrZQr/?utm_source=ig_web_copy_link" target="_blank">
<img src="image/t.jpg" style="width:400px;height:400px;">
</marquee>
</div>
</div>
<div class="map">
<center>
<iframe src="https://www.google.com/maps/d/u/0/embed?mid=1D66DY_D1-yifqdWfN4_k4mrj_S_JukO6" width="640" height="480" ></iframe>
</center>
</div>
<footer>
<div class="footer">
<div class="social">
<img src="image/instagram.png"><img src="image/youtube.png"><img src="image/twitter.png"><img src="image/facebook.png">
<div class="container">
<button>Contact Us</button>
</div>
<div class="popUp">
<form>
<label for="fn">First Name</label>
<input type="text" name="fn">
<label for="ln">Last Name</label>
<input type="text" name="ln">
<label for="email">Email</label>
<input type="email" name="email">
<label for="notes">Comments</label>
<textarea name="notes" rows="5" cols="5"></textarea>
<input id='submit' type="submit" value="Submit">
<p style="color:#b3b3b3;"> Pop-Up Facts, Recommendations,Interesting Routes... More For Istanbul! </p>
</form>
</div>
</div>
<div class="social" style="width:300px;">
<p>This website prepared for web design course by Kadir Has University students.</p>
<p>Ayça Çiçekdağ</p>
<p>Emre Karağaç</p>
<p>Hilal Pelin Akyüz</p>
<p>İpek Saygut</p>
<p>Sude Arslan</p>
</div>
<div class="social" style="width:180px;" id="logoalt"></div>
</div>
</footer>
<div class="kayanyazi">
<marquee direction=right bgColor="#2e9ca5" text-color="white">FIND ISTANBUL-EXPLORE ISTANBUL WITH US ! | by Ayça Çiçekdağ , Emre Karağaç,Hilal Pelin Akyüz
İpek Saygut,Sude Arslan
</marquee>
</div>
</body>
</html>

Alert icon notifications

would you know, how to create notifications which are displayed under the notification bell without using fixed position? I would like to have something clean and resposive if possible. Thank you very much
const bell = document.querySelector("#bell");
const notifications = document.querySelector('#notifications');
const alertBtn = document.querySelector(".active-alert")
bell.addEventListener("click", () => {
alertBtn.style.color =
"white";
notifications.innerHTML += ` <div class="member">
<li>
<span>Notifaction 1</span>
</li> </div> <div class="member">
<li>
<span>Notifaction 2</span>
</li> </div>`;
});
.member {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin: auto;
text-align: center;
background-color: darkgrey;
}
#notifications {
position: fixed;
width: 50%;
top: 70px;
right: 0px;
}
<header>
<div class="header">
<div class="logo">
<h1>YourApp™</h1>
</div>
<div class="userProfile">
<div class="bell">
<img id="bell" src="icons/icon-bell.svg" alt="notifications" height="30" width="30" />
<p class="active-alert">●</p>
<ul id="notifications"></ul>
</div>
<div class="user">
<img src="images/member-1.jpg" alt="Image of member 1" title="image_user_1">
<p>Member 1</p>
</div>
</div>
</div>
</header>

See below. Changes documented in the source code. Hope this helps.
const bell = document.querySelector("#bell");
const notifications = document.querySelector('#notifications');
const alertBtn = document.querySelector(".active-alert")
bell.addEventListener("click", () => {
/* alertBtn.style.color = "white"; Removed */
/* Hide button */
alertBtn.style.display = "none";
notifications.innerHTML += ` <div class="member">
<li>
<span>Notifaction 1</span>
</li> </div> <div class="member">
<li>
<span>Notifaction 2</span>
</li> </div>`;
});
.member {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin: auto;
text-align: center;
background-color: darkgrey;
}
#notifications {
/* position: fixed; Removed */
width: 50%;
/* top: 70px; Removed */
/* right: 0px; Removed */
padding: 0; /* Added */
margin-top: 0 /* Added */
}
/* Added */
.bell {
display: flex;
flex-direction: column;
}
<header>
<div class="header">
<div class="logo">
<h1>YourApp™</h1>
</div>
<div class="userProfile">
<div class="bell">
<img id="bell" src="icons/icon-bell.svg" alt="notifications" height="30" width="30" />
<p class="active-alert">●</p>
<ul id="notifications"></ul>
</div>
<div class="user">
<img src="images/member-1.jpg" alt="Image of member 1" title="image_user_1">
<p>Member 1</p>
</div>
</div>
</div>
</header>

Image's height increases when inside flex container

When I change the style of div.container to display: flex, the images height increases. How do I stop this from happening?
Before:
$('.text').prev('img').css('height',$('.text').outerHeight());
div.container {
border: 1px solid;
}
img {
float: left;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div class="container">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzg2Mjg1OTk0NF5BMl5BanBnXkFtZTcwMjQ4MTA3Mw##._V1_SX300.jpg" alt="RED" />
<div class="text">
<h2>Red</h2>
<p>When his peaceful life is threatened by a high-tech assassin, .</p>
</div>
</div>
After:
$('.text').prev('img').css('height',$('.text').outerHeight());
div.container {
border: 1px solid;
display: flex;
}
img {
float: left;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div class="container">
<img src="https://images-na.ssl-images-amazon.com/images/M/MV5BMzg2Mjg1OTk0NF5BMl5BanBnXkFtZTcwMjQ4MTA3Mw##._V1_SX300.jpg" alt="RED" />
<div class="text">
<h2>Red</h2>
<p>When his peaceful life is threatened by a high-tech assassin, .</p>
</div>
</div>

A display: flex element will have the style align-items: stretch by default. You can change that to align-items: flex-start to avoid your child elements matching the height of their tallest sibling.

align all the text boxes in same vertical position

How can I make align all the textboxes align in same vertical position?
My textboxes are starting just after the label is completed. The textboxes are following the width of the label.
It is also to be noted that all the labels are left justified. Can I do this without using tables, just only html and css?
Code ::
<div style="width: 100%; font-family: Arial,Helvetica, sans-serif;">
<div style="text-align: left; width: 100%; font-size: 13px;margin-bottom:5px;">
<b>Previous Password:</b>
<asp:TextBox ID="txt_prev_pwd" runat="server" />
</div>
<div style="text-align: left; width: 100%; font-size: 13px;margin-bottom:5px;">
<b>New Password:</b>
<asp:TextBox ID="txt_new_pwd" runat="server" />
</div>
<div style="text-align: left; width: 100%; font-size: 13px;margin-bottom:5px;">
<b>Retype Password:</b>
<asp:TextBox ID="txt_re_pwd" runat="server" />
</div>
</div>
</div>

You can add to b tag CSS styles:
b{
display: inline-block;
width: 150px;
}
I recommend change <b> tag on <label>, add a class name, and then style it.

you can use this code:
.fields{display:table}
.fields-row{display: table-row;}
.fields-row b{display: table-cell}
<div class="fields">
<div class="fields-row">
<b>Previous Password:</b>
<input type=text />
</div>
<div class="fields-row">
<b>New Password:</b>
<input type=text />
</div>
<div class="fields-row">
<b>Retype Password:</b>
<input type=text />
</div>
</div>
</div>

Try wrapping each line in a separate div that specifies the width and use the CSS property float, text-align and align
<div style="max-width: 50%; align: center">
<div style="max-width: 50%; text-align: center; float: left">Field #1</div>
<div style="max-width: 50%; text-align: center; float: right">
<input type="text">
</div>
</div>
<br>
<div style="max-width: 50%; align: center">
<div style="max-width: 50%; text-align: center; float: left">Field #2 Blah</div>
<div style="max-width: 50%; text-align: center; float: right">
<input type="text">
</div>
</div>
<br>
<div style="max-width: 50%; align: center">
<div style="max-width: 50%; text-align: center; float: left">Here's field #3</div>
<div style="max-width: 50%; text-align: center; float: right">
<input type="text">
</div>
</div>

Although Whitcik response is pretty accurate, I would prefeer using relative width:
b{
display: inline-block;
max-width: 75%;
min-Width: 20%;
}
This way, you can test in different widths keeping stable the aspect ratio (mobile devices). This is just ANOTHER solution. Whitcik is completely right with his response ;)

We Keep Coding

JavaScript is the programming language of the Web.

Unable to make responsive aligment - javascript

Related

How to align images and text together in a grid format

my pop up window is opened the top of page

Alert icon notifications

Image's height increases when inside flex container

align all the text boxes in same vertical position

Categories

Resources