deviation with margin in the first class with flex?

  • Resolved johannes999

    (@johannes999)


    6 months ago

    hello,

    this is the html code:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            background-color:#f7f7f7;
            margin: 0;
            padding: 0;
        }      
       
    </style>
</head>
<body>
 <div class="flex-container-macbook-page">
    <div class="section1-macbook-page">
        <div class="left-side-macbook1-page">Some text goes here on the left side.</div>
        <div class="middle-side-macbook1-page">Some text goes here in the middle.</div>
        <div class="right-side-macbook1-page">
<div class="macbook-page-link1"><a href="#">To The Best Offer</a></div>
    </div>  </div>
    <div class="section2-macbook-page">
        <div class="left-side-macbook2-page">Some text goes here on the left side.</div>
        <div class="middle-side-macbook2-page">Some text goes here in the middle.</div>
        <div class="right-side-macbook2-page">
<div class="macbook-page-link2"><a href="#">To The Best Offer</a></div>
</div>  </div>
    <div class="section3-macbook-page">
        <div class="left-side-macbook3-page">Some text goes here on the left side.</div>
        <div class="middle-side-macbook3-page">Some text goes here in the middle.</div>
        <div class="right-side-macbook3-page">
<div class="macbook-page-link3"><a href="#">To The Best Offer</a></div> 
</div>    </div>
</div>

        

</body>
</html>

    and this is css code:

    .flex-container-macbook-page {
          display:flex;
	  flex-direction:column;
	           width: 80%;
            height: 400px; /* Use 100vh for 100% height of the viewport */
            background: #e0fbfc;
            margin-left: 10%;
            margin-right: 10%;
            margin-top: -12rem;
        }

        .section1-macbook-page {
            display: flex;
			width:100%;
            flex-direction: row;
            margin-bottom: 15px;
            margin-top: 2rem;
		   
        }

        .left-side-macbook1-page {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: 33.333%;
			margin-left:4%;
           
        }

        .middle-side-macbook1-page {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 33.333%;
		
        }

        .right-side-macbook1-page {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            width: 33.333%;
          margin-right:4%;
           
        }

 .section2-macbook-page {
            display: flex;
            flex-direction: row;
	          width:100%;
             margin-bottom: 15px;
            margin-top: 2rem;
	      
        }

        .left-side-macbook2-page {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: 33.333%;
			margin-left:4%;
           
        }

        .middle-side-macbook2-page {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 33.333%;
        }

        .right-side-macbook2-page {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            width: 33.333%;
			margin-right:4%;
          
           
        }

 .section3-macbook-page {
            display: flex;
            flex-direction: row;
	         width:100%;
            margin-bottom: 15px;
            margin-top: 2rem;
	      
        }

        .left-side-macbook3-page {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: 33.333%;
			margin-left:4%;
          
        }

        .middle-side-macbook3-page {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 33.333%;
        }

        .right-side-macbook3-page {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            width: 33.333%;
           margin-right:4%;
           
        }

.macbook-page-link1,
.macbook-page-link2,
.macbook-page-link3 {
    border-radius: 15px;
    text-align: center;
    flex-wrap: nowrap;
    padding: 6px 20px; /* Adjusted padding */
    background: #3498db;
    
}

.macbook-page-link1 a,
.macbook-page-link2 a,
.macbook-page-link3 a {
    text-decoration: none;
    color: #fff;
    font-size: 1rem;
}

.macbook-page-link1:hover,
.macbook-page-link2:hover,
.macbook-page-link3:hover {
    background-color: #1d6ea4;
}

    the problem is : when you go to macbook page you see deviation in first class .in the first class the middle class and the link has deviation to left.

    I tried everything but I couldn’t find the problem.

    I have used this code :

    *{border: 1px solid red!important}

    but I couldn’t solve the problem.

    can someone tell me where it can be the fault?

    do not use the menu because it has to be worked.

    you can use the links from home page in the page self

    thanks

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • George Appiah

    (@gappiah)

    6 months ago

    the problem is : when you go to macbook page you see deviation in first class .in the first class the middle class and the link has deviation to left.

    From the LIVE “MacBook” link you provided, the “first class” has 4 flex items (3 divs and an empty p tag), whereas the second and third have only 3 flex items (3 divs).

    Rishi Mehta

    (@rcreators)

    6 months ago

    Hello @johannes999,

    Mark it resolved as @gappiah suggested, you have an extra <p> in the first row which is creating the deviation. Removing that will solve the issue.

    Regards,

    Rishi Mehta

    Thread Starter johannes999

    (@johannes999)

    6 months ago

    thanks both of you .

    I see the p in inspect elements but in the html code there is no p.

    this is the html code again:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            background-color:#f7f7f7;
            margin: 0;
            padding: 0;
        }      
       
    </style>
</head>
<body>

 <div class="flex-container-macbook-page">
    <div class="section1-macbook-page">
        <div class="left-side-macbook1-page">Some text goes here on the left side.</div>
        <div class="middle-side-macbook1-page">Some text goes here in the middle.</div>
        <div class="right-side-macbook1-page">
<div class="macbook-page-link1"><a href="#">To The Best Offer</a></div>
    </div>  </div>
    <div class="section2-macbook-page">
        <div class="left-side-macbook2-page">Some text goes here on the left side.</div>
        <div class="middle-side-macbook2-page">Some text goes here in the middle.</div>
        <div class="right-side-macbook2-page">
<div class="macbook-page-link2"><a href="#">To The Best Offer</a></div>
</div>  </div>
    <div class="section3-macbook-page">
        <div class="left-side-macbook3-page">Some text goes here on the left side.</div>
        <div class="middle-side-macbook3-page">Some text goes here in the middle.</div>
        <div class="right-side-macbook3-page">
<div class="macbook-page-link3"><a href="#">To The Best Offer</a></div> 
</div>    </div>
</div>

        

</body>
</html>

    and there is no p in css .

    this is css :

    
.flex-container-macbook-page {
          display:flex;
	  flex-direction:column;
	           width: 80%;
            height: 400px; /* Use 100vh for 100% height of the viewport */
            background: #e0fbfc;
            margin-left: 10%;
            margin-right: 10%;
            margin-top: -12rem;
        }

        .section1-macbook-page {
            display: flex;
			width:100%;
            flex-direction: row;
            margin-bottom: 15px;
            margin-top: 2rem;
		   
        }

        .left-side-macbook1-page {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: 33.333%;
			margin-left:4%;
           
        }

        .middle-side-macbook1-page {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 33.333%;
		
        }

        .right-side-macbook1-page {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            width: 33.333%;
          margin-right:4%;
           
        }

 .section2-macbook-page {
            display: flex;
            flex-direction: row;
	          width:100%;
             margin-bottom: 15px;
            margin-top: 2rem;
	      
        }

        .left-side-macbook2-page {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: 33.333%;
			margin-left:4%;
           
        }

        .middle-side-macbook2-page {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 33.333%;
        }

        .right-side-macbook2-page {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            width: 33.333%;
			margin-right:4%;
          
           
        }

 .section3-macbook-page {
            display: flex;
            flex-direction: row;
	         width:100%;
            margin-bottom: 15px;
            margin-top: 2rem;
	      
        }

        .left-side-macbook3-page {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: 33.333%;
			margin-left:4%;
          
        }

        .middle-side-macbook3-page {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 33.333%;
        }

        .right-side-macbook3-page {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            width: 33.333%;
           margin-right:4%;
           
        }

.macbook-page-link1,
.macbook-page-link2,
.macbook-page-link3 {
    border-radius: 15px;
    text-align: center;
    flex-wrap: nowrap;
    padding: 6px 20px; /* Adjusted padding */
    background: #3498db;
    
}

.macbook-page-link1 a,
.macbook-page-link2 a,
.macbook-page-link3 a {
    text-decoration: none;
    color: #fff;
    font-size: 1rem;
}

.macbook-page-link1:hover,
.macbook-page-link2:hover,
.macbook-page-link3:hover {
    background-color: #1d6ea4;
}

    may be be before I used p and after removed it . but it looks that is not removed in inspect elements . I cleaned the cach many times but the p is still in inspect elements how I can solve this problem if it is possible.

    thank you

    George Appiah

    (@gappiah)

    6 months ago

    Where are you putting this code?

    If you’re using the Classic Editor plugin and moving back and forth between VISUAL and TEXT tabs, WordPress may be converting blank lines into empty paragraphs!

    Also, your theme’s templates already include the page’s doctype, head element, and opening and closing HTML and body tags… so don’t include these in your HTML!

    Use just this HTML code below. If you need to add the style, move it to Customizer. And, again, if you’re working with a lot of code in Classic Editor, stay in the TEXT editor… or create a custom page template file where you can safely add all your code.

    <div class="flex-container-macbook-page">
    <div class="section1-macbook-page">
        <div class="left-side-macbook1-page">Some text goes here on the left side.</div>
        <div class="middle-side-macbook1-page">Some text goes here in the middle.</div>
        <div class="right-side-macbook1-page">
            <div class="macbook-page-link1"><a href="#">To The Best Offer</a></div>
        </div>
    </div>
    <div class="section2-macbook-page">
        <div class="left-side-macbook2-page">Some text goes here on the left side.</div>
        <div class="middle-side-macbook2-page">Some text goes here in the middle.</div>
        <div class="right-side-macbook2-page">
            <div class="macbook-page-link2"><a href="#">To The Best Offer</a></div>
        </div>
    </div>
    <div class="section3-macbook-page">
        <div class="left-side-macbook3-page">Some text goes here on the left side.</div>
        <div class="middle-side-macbook3-page">Some text goes here in the middle.</div>
        <div class="right-side-macbook3-page">
            <div class="macbook-page-link3"><a href="#">To The Best Offer</a></div>
        </div>
    </div>
</div>
    Thread Starter johannes999

    (@johannes999)

    6 months ago

    thanks,

    I removed:

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            background-color:#f7f7f7;
            margin: 0;
            padding: 0;
        }      
       
    </style>
</head>

    and the problem is gone .

    but suppose if I want specifiek page like (macbook ) to be width:100% and height:100% to be lightgrey.

    and border with 80% width and 400px height to be white on this specifiek page how I can achieve it . do I have to create custom template and use this template in this specifiek page?

    thank you

    Thread Starter johannes999

    (@johannes999)

    6 months ago

    thank you very much,

    I know what to do .

    the problem is solved

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘deviation with margin in the first class with flex?’ is closed to new replies.