Responsive design - web page margins

manon_boiteau · October 21, 2020, 4:17pm

Hello again,

I have a small issue with my responsive design… When I shrink my screen, I can see a margin on the right of the web page. Is someone know why ? Because of it, I can’t managed my responsive design doing well.

Thanks in advance for your help!

Screen:

Code below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" /> 
    <link rel="stylesheet" href="style.css"/>  
    <title>Product Landing Page - Maison Mauricette</title>
  </head>
  
  <body>
    <div id="bloc-page">
<!--HEADER-->
	  <div id="header-ban"><span class="smiley-heart">&#128525;</span> <span class="bold">HAPPY DAYS MAISON MAURICETTE:</span> -10% on all assortments & free shipping with the code <span class="promo-code">HAPPY-MAMA</span></div>

      <header id="header">
        <div id="header-part1">
          <div class="header__lang">
            <p>
              <a href="/" id="en">EN</a>
              |
              <a href="/" id="nl">NL</a>
              |
              <a href="/" id="fr">FR</a>
            </p>
          </div>

          <div class="header__logo">
            <a href="/"><img id="header-img" src="https://lh3.googleusercontent.com/HMp98mIW_i2lIGv2yy9uwJHowf-l3urXvigK6qhy9yiXsaOpAJIt3h_9c6TGqS4rX3_du7a6Q7NPLuWLD8hn0dFUg-HN6cmXQLIhxL5UkvuX6Dz5K24bT3G5ZlgMQNgMCH1AY66zyqVlrsakDU-QJy-qSysPuPql2XOIsabxRU4fO11cT8BTPRMSe6JB7ag99WQJm4Xr0zG1s9DBYNugyLQtKakndICW-ZfKz8xs3LkjZlBxH9ODCu0oYDStm450C6LNbYxWV5vRzGaVvIg9BkMaSFfqtCv0nvs6dX9TKibEdU9GTi73lUbgGjavSEsrVFuzI36Pt4E3ySXvkM4X89PEK6K_nRSkabjeDiZaXWvsK-WJxAetSema5Z3poy3gFkM3oCdotDT88A3eR_ZbSRN_-9A_rV64dLZGx8tSHVDFUsg2A2_GanWCh8Y7p6anmcid67BWYqClvqHMJQrs9GlmwtK_NjiEqAYeZU9uLm5_wUaOX0AeB-yxQPV_Fcv9_YnKsEF1j406JvW1cCLiZRVVMrrr-bjZouXtrGAatF_lQJPSbHEdvCVG9TVqUpZV2xVpVFgyRmAY8I6Wbih63igvzRYMYztXuPoXDA-2S9b-ucbY-eQ7RKs-Npys7kGJy6DLybKhE-7_6uYLtAlXzC4SnR5_1lJH2arDWkgfg4Tbmuft_3C4VqhXZJLBCg=w1614-h1606-no?authuser=0" alt="Maison Mauricette's logo" /></a>
          </div>

          <div class="header__icon">
            <a href="/"><img src="https://uxwing.com/wp-content/themes/uxwing/download/01-user_interface/envelope.png" alt="Email icon" id="email-icon" /></a>
            <a href="/"><img src="https://image.flaticon.com/icons/png/512/68/68984.png" alt="Stores icon" id="stores-icon" /></a>
            <a href="/"><img src="https://img.icons8.com/ios/452/shopping-basket.png" alt="Basket icon" id="basket-icon" /></a>
          </div>
        </div>

<!--NAV-->
		<nav id="nav-bar" class="header__nav">
			<ul>
				<li><a href="/">Home</a></li>
              	<li><a href="/">E-shop</a></li>
              	<li><a href="/">Collections</a></li>
              	<li><a href="/">News</a></li>
              	<li><a href="/">Collab'</a></li>
            </ul>
        </nav>
        
<!--END NAV-->
      </header>
<!--END HEADER-->

<!--PARALLAX-->
		<section class="parallax">
			<div class="parallax__title">
				<h2>THE 100% ORGANIC,<br /> NATURAL AND GOURMET FLOWER BISCUITS,<br /> MADE IN AMSTERDAM</h2>
				<button>E-SHOP</button>
			</div>
		</section>
<!--END PARALLAX-->

<!--MAIN CONTENT-->
		<div id="bloc-main">
        	<div id="bloc-main__title">
				<h1>WELCOME AT MAISON MAURICETTE</h1>
          		<p>Discover the flowery cookies made in Amsterdam, 100% organic, natural and tasty, 
realized by Manon, passionate about gastronomy and art of living since always.</p>
        	</div>
        
        	<div id="bloc-main__photos">
	      		<div id="column-1">
	      			<div id="column-1__home">
	      				<a href="/"><img class="home" src="home.jpg" alt="Someone making cookies with dough." /></a>
	        			<div class="home-text"><button>HOME</button></div>
					</div>

					<div id="column-1__values">
						<a href="/"><img class="values" src="values.jpg" alt="A pot with differents plants and herbs." /></a>
						<div class="values-text"><button>OUR VALUES</button></div>
					</div>

					<div id="column-1__partners">
						<a href="/"><img class="partners" src="partners.jpg" alt="Hands of someone who is picking up plants." /></a>
						<div class="partners-text"><button>OUR PARTNERS</button></div>
					</div>
	        	</div>

	      		<div id="column-2">
	      			<div id="column-2__news">
	        			<a href="/"><img class="news" src="news.jpg" alt="A bouquet of flowers." /></a>
	        			<div class="news-text"><button>NEWS</button></div>
	        		</div>

	        		<div id="column-2__collections">
	        			<a href="/"><img class="collections" src="collections.jpg" alt="Cookies Maison Mauricette out of the oven." /></a>
	        			<div class="collections-text"><button>OUR COLLECTIONS</button></div>
	        		</div>

	        		<div id="column-2__collabs">
	        			<a href="/"><img class="collabs" src="collabs.jpg" alt="An outside reception." /></a>
	        			<div class="collabs-text"><button>COLLAB'</button></div>
	        		</div>
	      		</div>  
	    	</div>  
	    </div> 

<!--
	    <div class="contenant">
        <img src="home.jpg" alt="image">
        <div class="texte_centrer">Exemple de texte</div>
      </div>-->
     
<!--END MAIN CONTENT-->

<!--FOOTER-->
      <footer>
        <div id="footer-part1">
          <h2>Join<a href="/"><span class="instagram-mama"> @maisonmauricette </span></a> on Instagram</h2>
          <p>Follow behind the scenes and discover MAISON MAURICETTE's tricks and novelties.</p>
        </div>
        
        <div class="footer-logo">
          <img id="footer-logo" src="https://lh3.googleusercontent.com/HMp98mIW_i2lIGv2yy9uwJHowf-l3urXvigK6qhy9yiXsaOpAJIt3h_9c6TGqS4rX3_du7a6Q7NPLuWLD8hn0dFUg-HN6cmXQLIhxL5UkvuX6Dz5K24bT3G5ZlgMQNgMCH1AY66zyqVlrsakDU-QJy-qSysPuPql2XOIsabxRU4fO11cT8BTPRMSe6JB7ag99WQJm4Xr0zG1s9DBYNugyLQtKakndICW-ZfKz8xs3LkjZlBxH9ODCu0oYDStm450C6LNbYxWV5vRzGaVvIg9BkMaSFfqtCv0nvs6dX9TKibEdU9GTi73lUbgGjavSEsrVFuzI36Pt4E3ySXvkM4X89PEK6K_nRSkabjeDiZaXWvsK-WJxAetSema5Z3poy3gFkM3oCdotDT88A3eR_ZbSRN_-9A_rV64dLZGx8tSHVDFUsg2A2_GanWCh8Y7p6anmcid67BWYqClvqHMJQrs9GlmwtK_NjiEqAYeZU9uLm5_wUaOX0AeB-yxQPV_Fcv9_YnKsEF1j406JvW1cCLiZRVVMrrr-bjZouXtrGAatF_lQJPSbHEdvCVG9TVqUpZV2xVpVFgyRmAY8I6Wbih63igvzRYMYztXuPoXDA-2S9b-ucbY-eQ7RKs-Npys7kGJy6DLybKhE-7_6uYLtAlXzC4SnR5_1lJH2arDWkgfg4Tbmuft_3C4VqhXZJLBCg=w1614-h1606-no?authuser=0" alt="Maison Mauricette's logo" />
        </div>
        
        <div id="footer-part2">
          <a href=""><img src="https://image.flaticon.com/icons/png/512/68/68984.png" alt="Stores icon" id="stores-icon2" /></a>
          <a href=""><img src="https://computer-services.fr/wp-content/uploads/2018/10/lock-outlined-padlock-symbol-for-security-interface_icon-icons.com_57803.png" alt="Secured Paiement icon" id="paiement-icon" /></a>
          <a href=""><img src="https://image.flaticon.com/icons/png/512/88/88254.png" alt="Expedition icon" id="expedition-icon" /></a>
        </div>
        
        <div id="footer-part3">
          <div>
            <h3>+ INFOS</h3>
            <p>
              <a href="/">Contact</a><br />
              <a href="/">Collab'</a><br />
              <a href="/">Press</a><br />
              <a href="/">General terms & conditions</a><br />
              <a href="/">FAQ</a><br />
            </p>
          </div>
          
          <div>
            <h3>MAISON MAURICETTE</h3>
            <p>
              <a href="/">Story</a><br />
              <a href="/">DNA</a><br />
              <a href="/">Manifesto</a><br />
            </p>
          </div>
          
          <div>
            <h3>COLLECTIONS</h3>
            <p>
              <a href="/">Imagin</a><br />
              <a href="/">Seasonal</a><br />
              <a href="/">Salt & Pepper</a><br />
            </p>
          </div>
          
          <div>
            <h3>RECEIVE OUR DELICIOUS NEWS</h3>
            <input id="input-nl" type="email" placeholder="Email">
            <button id="button-nl">OK</button>
          </div>
            
          <div>
            <h3>FOLLOW US</h3>
              <div id="social-media">
              	<div id="social-media__1">
          			<a href="/" target="_blank"><img id="instagram-icon" src="https://constancemeffre.files.wordpress.com/2018/02/logo-instagram-noir.png?w=591" alt="Instagram icon." /></a>
          		</div>
          		<div id="social-media__2">
          			<a href="/" target="_blank"><img id="facebook-icon" src="https://cdn.iconscout.com/icon/free/png-512/facebook-social-media-fb-logo-square-44659.png" alt="Facebook icon." /></a>
          		</div>
              </div>
          </div>
      </div>

      <div id="footer-part4">
        <div>&#169; 2020 MAISON MAURICETTE, DESIGNED BY MAURICETTE HERSELF</div>
      </div>
              
      </footer>
<!--END FOOTER-->
    </div>
  </body>
</html>

CSS:

/*FONTS*/
@import url('https://fonts.googleapis.com/css2?family=Secular+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');

/*GENERAL*/
body, html {
  height: 100%;
}

body{
  font-family: Verdana, "Trebuchet MS", Arial, sans-serif;
}

.bold{
  font-weight: bold;
}


/*HEADER*/
#header-ban{
  text-align: center;
  color: black;
  font-size: 0.8em;
  background-color: #f4d62f;
  padding-bottom: 5px;
  padding-top: 2px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  width: 100%;
}

.smiley-heart{
  font-size: 20px;
}

.promo-code{
  font-weight: bold;
  color: red;
}

#header-part1{
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.header__lang{
  margin-left: 20px;
  margin-top: -10px;
}

.header__lang a{
  text-decoration: none;
  color: black;
  font-size: 0.9em;
}

.header__lang a:hover{
  color: #d4d4d4;
}

.header__lang a:visited{
  color: black;
}

#header-img{
  width: 100px;
}

#email-icon{
  width: 30px;
  margin-right: 20px;
}

#stores-icon{
  width: 25px;
  margin-right: 20px;
}

#basket-icon{
  width: 29px;
  margin-right: 20px;
  margin-bottom: -2px;
}


/*NAV*/
#nav-bar ul{
  list-style-type: none;
  display: flex;
  justify-content: space-around;
  margin: auto;
  margin-top: 50px;
  margin-bottom: 30px;
}

#nav-bar a{
  color: black;
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 1.3em;
}

#nav-bar a:hover{
  color: #d4d4d4;
  border-top: 3px solid #d4d4d4;
}

#nav-bar a:visited{
  color: black;
}


/*PARALLAX*/
section{
  display: flex;
  justify-content: center;
  align-items: center;
}

.parallax{
  /* The image used */
  background-image: url("parallax2.jpg");

  /* Full height */
  height: 100%;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax__title{
  padding-top: 20%;
  padding-bottom: 20%;
  text-align: center;
}

.parallax__title h2{
  color: white;
  font-family: 'Shadows Into Light', cursive;
  font-size: 2.5em;
}

.parallax__title button{
  display: inline-block;
  width: 100px;
  background-color: #f4d62f;
  border-radius: 5px;
  border: #f4d62f solid 0.1em;
  color: black;
  font-weight: bold;
  font-family: 'Shadows Into Light', cursive;
  font-size: 1em;
  cursor: pointer;
  margin-top: 60px;
}

.parallax__title button:hover{
  border: white solid 0.1em;
  color: white;
  background-color: transparent;
}


/*MAIN CONTENT*/
#bloc-main{
  width: 1000px;
  margin: auto;
}

#bloc-main__title{
  text-align: center;
  margin-top: 80px;
  margin-bottom: 80px;
}

#bloc-main__title h1{
  font-family: 'Secular One', Verdana, sans-serif;
}

#bloc-main__photos{
  display: flex;
  justify-content: space-between;
}

#bloc-main__photos #column-1{
  display: flex;
  flex-direction: column;
  width: 49%;
}

.home, .values, .partners{
  width: 100%;
  margin-bottom: 15px;
}

.partners{
  margin-top: 6px;
}

#bloc-main__photos #column-2{
  display: flex;
  flex-direction: column;
  width: 49%;
}

.news, .collections, .collabs{
  width: 100%;
  margin-bottom: 15px;
}

#column-1__home, #column-1__values, #column-1__partners{
  position: relative;
  color: white;
  text-align: center;
  font-size: 3vw;
}

.home-text, .values-text, .partners-text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#column-2__news, #column-2__collections, #column-2__collabs{
  position: relative;
  font-size: 3vw;
}

.news-text, .collections-text, .collabs-text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.home-text button, .values-text button, .partners-text button, .news-text button, .collections-text button, .collabs-text button{
  background-color: transparent;
  color: white;
  font-size: 1em;
  border: solid white 0.1em;
  padding: 5px 10px 5px 10px;
}

#column-1__home:hover, #column-1__values:hover, #column-1__partners:hover, #column-2__news:hover, #column-2__collections:hover, #column-2__collabs:hover{
  filter: opacity(60%);
}

.home-text button:hover, .values-text button:hover, .partners-text button:hover, .news-text button:hover, .collections-text button:hover, .collabs-text button:hover{
  cursor: pointer;
}



/*FOOTER*/
footer{
  background-color: #f7f7f7;
  padding-top: 10px;
}

footer h2{
  font-family: 'Secular One', Verdana, sans-serif;
}

footer h3{
  font-family: 'Secular One', Verdana, sans-serif;
  font-size: 0.9em;
}

footer p{
  font-size: 0.8em;
  margin-top: -10px;
}

#footer-part1{
  text-align: center;
}

#footer-part1 p{
  font-size: 1em;
}

#footer-part1 h2{
  text-transform: uppercase;
}

#footer-part1 a{
  text-decoration: none;
  color: black;
  font-family: 'Shadows Into Light', cursive; 
}

.instagram-mama:hover{
  color: #f4d62f;
}

#footer-logo{
  width: 80px;
  margin-top: 20px;
}

.footer-logo{
  display: flex;
  justify-content: center;
}

#stores-icon2, #paiement-icon, #expedition-icon{
  width: 40px;
  margin-bottom: 20px;
}

#footer-part2{
  display: flex;
  justify-content: space-around;
  margin-top: 50px;
}

#footer-part3{
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
}

#footer-part3 a{
  text-decoration: none;
  color: black;
}

#footer-part3 p a:hover{
  color: #d4d4d4;
}

#footer-part3 a:visited{
  color: black;
}

#input-nl{
  height: 18px;
}

#button-nl{
  background-color: #f4d62f;
  border-radius: 5px;
  border: #f4d62f solid 0.1em;
  color: black;
  font-size: 0.9em;
  cursor: pointer;
  height: 25px;
}

#button-nl:hover{
  border: black solid 0.1em;
  color: black;
  background-color: transparent;
}

#social-media{
  display: flex;
  justify-content: space-between;
  margin-top: -5px;
}

#instagram-icon{
  width: 30px;
  margin-top: 3px;
}

#facebook-icon{
  width: 35px;
}

#instagram-icon:hover, #facebook-icon:hover{
  filter: opacity(20%);
}

#footer-part4{
text-align: center;
font-size: 0.6em;
background-color: #f4d62f;
padding-bottom: 10px;
padding-top: 10px;
margin-top: 20px;
width: 100%;
margin-right: 0;
}


/*MEDIA QUERIES*/
@media all and (max-width: 1024px)
{
  #bloc-page
  {
    width: auto;
  }

  #bloc-main__photos{
    flex-direction: column;
    text-align: center;
  }

rickstewart · October 21, 2020, 4:23pm

Hello @manon_boiteau

Is this webpage up someplace we can view it using our development tools? A url?

mdshariq · October 21, 2020, 4:35pm

Hey @manon_boiteau i tried copy pasting everything here but the result was not quite good can you please share a link to this page ? CodePen maybe ?

manon_boiteau · October 21, 2020, 7:54pm

Thank you @rickstewart and @mdshariq for your answer!

My CodePen link: CodePen - Landing Page (I changed the img because the real one are on my own computer. Normally, they have not the same size - screen below).
CodePen:

The one with real img:

Even on CodePen, I see a right margin. When I shrink my screen, my nav is too long and the two columns of img are not centered on the page.

Thanks in advance for your help

mdshariq · October 21, 2020, 8:06pm

Hey @manon_boiteau this is the probelm that i see:

 #bloc-main {
    width: 1000px;

its a hardcoded value so it won’t change with the screen size you should try some other units to set the width of this div like percentages .

manon_boiteau · October 22, 2020, 8:18am

Thank you @mdshariq it works now! Thank you very much for your help
Have a nice day,