How to make RWD and margins?

HTML & CSS
1

I am newbie in RWD coding so I have a question. I need to make RWD on flexbox from this .PNG:

Page in PNG

My code is here:
Page in HTML and CSS

So how to make RWD and margin scaling in the bottom? “Powrot” and the left and “Dalej” on the right.

2

The links show the following warnings:

Removing www. and the pages display OK?

3

Ok. Thanks John_Betong

I changed the domain. Now it is safely.

1 Like
4

I tried the following validation and there were no errors:

https://validator.w3.org/nu/?doc=http%3A%2F%2Finteractiveteam.pl%2Findex1.html

Unfortunately that was not the case with the following:

https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Finteractiveteam.pl%2Findex1.html&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en

5

Firefox is still showing an “insecure site” warning.

6

You have given your main-class div a width of 723px. That will never be responsive. It all depends on how you want your site to look like on smaller devices, but that width needs to go. Try changing the width to max-width and see if that gives the result you want.

7

OK. Don’t need look at my website. My problem is:
div
p Left side with text /p

pRight side with text /p
/div

In div CSS style should I paste display: flex?
and p left side margin-left: 0px, p right side margin-right: 0px;?

8 
<!doctype html>
<html lang="pl">
<head>


<style>

.bottom-two {
            width: 720px;
            height: 95px;
            display: flex;
            background: yellow;
        }
        
        .back {
            margin-top: 66px;
        }

        
        .forward {
            margin-top: 49px;
        }
        
        .forward p {
            height: 46px;
            width: 124px;
            background: red;
            text-align: center;
            color: #fff;
        }
    
    </style>
</head>

<body>
<div class="bottom-two">
            
            <div class="back">
                
                <p><strong>Powrót</strong></p>
            
            </div>
            
            <div class="forward">
                
                <p>Dalej</p>

           </div>

</div>

</body>
</html>
9

Off Topic:

@interactiveteam: when you post code on the forums, you need to format it so it will display correctly. (I’ve fixed your post above for you.)

You can highlight your code, then use the </> button in the editor window, or you can place three backticks ``` (top left key on US/UK keyboards) on a line above your code, and three on a line below your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.

10

I don’t know if it’s just a mistake in copying the code to the forums, but you’re missing two closing </div> tags.

11

As I’ve already indicated, you’re site will never be responsive whilst you have fixed widths like this. Try changing them one by one to max-width.

1 Like
12

Ok, ok.

So code is with /div

How to make on the right side .forward p margin 0px in right side to do it responsively. When size will be on smartphone then .forward p is still margin right 0px and margin left is closer to left side.

@Gandalf
How to do the width to should be responsive this divs?

13

I am looking for in google and w3schools and don’t have answer.

14

As I explained above (twice), you need to change the fixed widths with max-width.

15

Yea, yea. Thanks, thanks

I have done it before your post. Thanks a lot.

And the last problem is when max-width of div is 723px then in this div are two divs. First is bottom and left margin 0px and the second should be on the right side. How do this? By margins?

16

You can set the inner divs to a percentage width if that suits the design, eg width: 50%;

You seem to have quite a lot of divs with a fixed width; they will all need changing.

17

Yea.
But look at this JPG

https://wrzucplik.pl/pokaz/1788231---w3tv.html

Powrót on the left and dalej with red background on the right?
I tried with margins in px but it isn’t responsively.

18

I’m not really sure what you’re trying to do there. It is the website as a whole that you need to make responsive - not individual items.

1 Like
19

Did you mean something like this?

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
.bottom-two {
	max-width: 720px;
	margin:auto;
	min-height:95px;
	display: flex;
	align-items:center;
	background: yellow;
}
.back{margin:0 0 0 10px;}
.forward {
	margin:0 10px 0 auto;
	height: 46px;
	width: 124px;
	background: red;
	text-align: center;
	color: #fff;
	display:flex;
	align-items:center;
	justify-content:center;
}

</style>
</head>

<body>
<div class="bottom-two">
  <p class="back"><strong>Powrót</strong></p>
  <p class="forward">Dalej</p>
</div>
</body>
</html>

2 Likes
20

Thanks a lot. It is something like this
I learn every day front end.
Thanks.

1 Like