An image in the header and footer is getting out of its container

saejim91 · June 14, 2020, 2:35pm

This issue occurs when i resize the browser to mobile view. (HTML)

<!DOCTYPE html>
<html>
<head>
  <title>Git love!</title>
  <meta charset="utf-8">
    <meta name="description" content="An example of a responsive webpage">
    <meta name="keywords" content="responsive,webpage,html,css,javascript">
    <meta name="Author" content="Saejim">
    <meta name="viewport" content="width=device-width, initial-scale:1.0">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="fa/all.css">
    
</head>
<body>

  <main>
    <header>
       <div class="header">
          <h1>About us</h1>
      </div> 
    </header>

    <div class="navbar">
    <nav>
      
      <ul>  
        <li><a href="home.html" target="_blank";>Home</a></li>&nbsp;
        <li><a href="AboutUs.html" target="_blank";>About Us</a></li>&nbsp;
        <li><a href="Services.html" target="_blank";>Services</a></li>&nbsp;
        <li><a href="Contactus.html" target="_blank";>Contact&nbsp;Us</a></li>&nbsp;
        <li><a href="Log in.html" target="_blank";>Log in</a></li>
      </ul>  
    </nav>
  </div> 

  <div class="head_image">

        <img src="aboutus-head.jpg" alt="united we stand,divided we fall">

  </div> 

  <div class="about-p">
    
       <p>
         In the days of overwhelming options,opportunities and crazy competition like todays society;it ain't no surprise that not each and everyone of us fits in the rat-race.
         some of us were meant to do what we love to do avoiding the attempt of forcefully imposed weight on us.whether,it is by our parents or the nation.we r individual being
         on this earth.we have our own choices and plans for life.And i believe we are matured
         enough to figure that out by ourselves.If not,there is no need to worry.There is always a room for us to take time and look for that.Not outside of us but inside of us.
       </p>

        <p>
          Yet,whenever you and i try to break free of the forceful stream of the society,
          we fall victim to the unbreakable shackle of stigma,oppression and adversity.
          there are even times when the universe itself playing games with us.where we start to
          lose our family,friends,loved ones and are pushed to corner of our world.Sometimes it
          may be even due to the dark fate giving us a thick ear and leaves us in void.
          where there might be no one else to hear u out anymore and u get to see how all the 
          people that u cared through ur life hides behind those disgusting masks.
        </p>

        <p>
          This is where i come to you with an open arms and don't want anything but to give u this love and care that u and i both deserve.i don't want nothing in return.
          u can discuss anyhting u want,share ur story of achivements or the voidness with the community,anonymously or by ur choice.
          
        </p>

        <p>
          May we survive and grow together..From here to eternity


        </p>
  </div>

  <div class="footer">
		<footer>
			&copy;2020 <b>Git love</b> an online mental support group
			<div class="f2">
			follow us on:

			<a href="#">
				<i class="fab fa-facebook" style="color: white";>Facebook</i>
				<br>
			</a>
			
			<a href="#">
				<i class="fab fa-twitter">twiiter</i>
			</a>
			</div>
		</footer>
	</div>
  </main>
</body>

saejim91 · June 14, 2020, 2:37pm

@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap');
body {
	background-image: url(doodle.jpg);
	background-repeat:no-repeat;
	background-size:1600px 800px;
	background-attachment: fixed;
}
main {
	width: 90%;
	height: 100%;
	background: rgb(157,148,86);
	background: rgb(157,148,86);
    background: linear-gradient(180deg, rgba(157,148,86,1) 0%, rgba(242,181,38,1) 16%, rgba(195,20,17,1) 100%);
	margin: 0 auto;
	border-style: solid;
	border-width: 4px;


}
.navbar {
	
}

.header{
	text-align:center;
	color:rgb(189,71,154);
	background: rgb(177,215,223);
    background: linear-gradient(180deg, rgba(177,215,223,1) 0%, rgba(245,147,147,1) 38%,
     rgba(249,167,140,1) 59%, rgba(252,176,69,1) 100%);
	padding:15px 30px;
	font-family: 'Pacifico', cursive;
	border-style: inset;
	border-color: #069564;
	border-bottom-width: 0px;
	
}
.redbar {
	font-size:25px;
	background-color:red;
	height:80px;
	border-style:solid;
	margin:10px 5px ;
	padding:10px;
	text-align:center;
	font-family:'Lobster', cursive,monospace;

}
button {
	background-color:green;
	color:white;
	padding: 15px 30px;
	margin-left: 45%;
	

}

button:hover {
	background-color: #DEE025;
	color: #0A0909;
	font-size: 15px;
	font-family:"Comic Sans MS", cursive, sans-serif; 
	font-weight: bolder;
}
h2 {
	color: white;
	text-decoration: none;
	text-align:center;
	font-family:monospace;
	
	border-style: solid;
	border-color: black;
	background: rgb(238,146,146);
	background: radial-gradient(circle, rgba(238,146,146,1) 72%, rgba(8,2,107,1) 88%, rgba(3,209,251,1) 99%);
	padding: 20px 20px;
}
ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	border-style: solid;
	background-color:  rgba(255,0,123,1);
	padding: 10px 10px 10px 10px;
	font-size: 20px;
	text-align: right;

}
li {
	display: inline;

}
li a {
	text-decoration-line: none;
	color: white;
	

}
li a:hover {
	background-color:rgb(0,0,71);
	padding:10px 10px 11px 10px;

}
.p {
	background-color: lightgrey;
	border:10px solid red;
	width: 50%px;
	height:340px; 
	padding:10px;
	font-weight: lighter;
	font-family: 'Sriracha', cursive,sans-serif;
	overflow: auto;

}
.hr {
	position: relative;
	top:0px;
}
footer {
	background-color: rgba(25,25,140,0.9);
	color: white;
	box-sizing: border-box;
	border-style: solid;
	border-color: #E7E3DB;
	border-width: 2px;
	padding: 25px;
	margin-top: 32px;
	


}

.f2 {
	float: right;

}

.fab.fa-twitter {
	color: white;
	margin:2px 0px 0px 90px;
   
}

/* About us section */

.head_image {

	margin:40px;
	
	
}

.about-p {
	background-color: silver;
	border-style: solid;
	border-color:rgb(38, 4, 119);
	padding: 10px;
	font-family: 'Sriracha', cursive,monospace;
}

slay.py · June 14, 2020, 2:42pm

Hello,
when you want to have a responsive website it’s better to avoid pixels as measures.
If you want to have an image that will not overflow the container, just add a property to the image like img{ width:90%; margin:auto;}
But remember to avoid pixels!

saejim91 · June 14, 2020, 2:42pm

saejim91 · June 14, 2020, 2:47pm

Hey slay,
i tried that as well but still not working.
u can see the images here for what exactly is going on.

slay.py · June 14, 2020, 2:52pm

The problem is : if you set margin:40px in your container it will take that measure also when your screen will be much smaller!
As it is for the footer , if you set margin-top:32px or padding:25px, when you resize the screen they will stay static and they will not change.

saejim91 · June 14, 2020, 3:01pm

Ah,i see.
but about the footer i still don’t know how else can i make them icons stay on the right corner of the box simultaneously in a list order.
setting them to float:right alone didn’t work as i expected.

slay.py · June 14, 2020, 3:05pm

Remember to put in your css all the rules for the f2. Not only float:right, you want to display them on a line, not on a column. And remember to correct that margin: 90px from the twitter icon!

saejim91 · June 17, 2020, 3:06pm

Excuse me for bothering you man.This still hasn’t fixed the problem of twitter getting overflown when the browser is resized.it is so difficult being a self-learner to carry on,without any friends or mentor in the relevant.

slay.py · June 17, 2020, 3:18pm

Hi @saejim91,
no worries!
do you have an updated codepen link ?
Or an updated image of what you have changed?
Cheers

saejim91 · June 20, 2020, 7:57pm

Hi @slay.py
here is the codepen link:https://codepen.io/deadhunter/pen/RwrpreG

It is just been two months that i learned HTML and CSS and trying to put’em all into pieces.haha.Pardon this jumble.

lasjorg · June 20, 2020, 9:35pm

Give the footer min-height instead of height so it can grow in height as needed.
Do not use float and transform.
Use flexbox and some container elements.

Having a div with a class of footer with a footer element inside it doesn’t really make sense. Remove it and move the class to the footer instead, also use the class and not an element selector.

Example code

<footer class="footer">
  &copy;2020 <b>Git love</b> an online mental support group
  <div class="social">
    follow us on:
    <div class="social-links">
      <a href="#">
        <i class="fab fa-facebook" style="color: white" ;>Facebook</i>
        <br>
      </a>
      <a href="#">
        <i class="fab fa-twitter">twiiter</i>
      </a>
    </div>
  </div>
</footer>

.footer {
  background-color: rgba(25,25,140,0.9);
  color: white;
  box-sizing: border-box;
  border-style: solid;
  border-color: #E7E3DB;
  border-width: 2px;
  padding:10px;
  
  min-height: 80px;
  display: flex;
  flex-wrap: wrap;
}

.social {
  display: flex;
  margin-left: auto;
}

.social-links {
  margin-left: 5px;
}

.social-links a {
  margin-bottom: 10px;
}

.fab.fa-twitter {
	color: white;
}

Also, the .about-p element is overflowing, replace transform: translate(100px) with margin: auto.

saejim91 · June 22, 2020, 6:54pm

Hey man,
Thanks a lot!u have solved all the problems already i have been facing for past few days now.i have already fixed half of the problems and i have started learning about flexbox now.as i have no mentor or anything,just some random esoteric community.

i have been learning in whatever order it is in w3school.Anyways,i see the point now and certainly it makes sense now of what i have been struggling with.
u saved the day!!

Topic		Replies	Views
Other Project, feedback please Code Feedback	4	565	February 17, 2021
My text is on top of my image when resizing my screen to mobile version	5	811	January 16, 2021
Screen size responsiveness issue	3	805	January 16, 2021
Frustration on my first steps (a really concealed cry for help?) HTML-CSS	9	873	March 9, 2021
Please help me on my first project HTML-CSS	21	1564	March 9, 2021

An image in the header and footer is getting out of its container

Related topics