How do I squeeze my page layout?

HTML & CSS
1

This is my page: http://185.105.4.132/~orangeye/brief/

Its a wordpress site.

this is my markup:

<div style="background-color: #1f4260;">

<img class=" wp-image-5421 alignright" src="http://185.105.4.132/~orangeye/wp-content/uploads/2016/01/Orangeye-bacground-top-right-269x300.png" alt="Orangeye bacground top right" width="206" height="230" />

&nbsp;

<img class="wp-image-5423 aligncenter" src="http://185.105.4.132/~orangeye/wp-content/uploads/2016/01/Orangeye-logo-300x221.png" alt="Orangeye-logo" width="166" height="122" />

&nbsp;

&nbsp;
<p style="text align: centre; color: #fff; font-size: 18px;">                 Welcome to the Orangeye Digital brief Submissions page. Please enter all available details about your upcoming project below. As soon as job is activated an email will be sent to notify you.</p>
[contact-form-7 id="5419" title="Digital Brief"]

</div>
&nbsp;

&nbsp;
<div style="background-color: #fff; text-align: centre;"><img class="size-full wp-image-5422 aligncenter" src="http://185.105.4.132/~orangeye/wp-content/uploads/2016/01/Orangeye-footer-logo.png" alt="Orangeye-footer-logo" width="60" height="61" /></div>

and this is my css

input.wpcf7-form-control.wpcf7-submit{
border: 1px solid #fa7a02;
background-color:#fa7a02; 
text-align: center;  
  
}

#edgtf-back-to-top{
background-color:#fa7a02;
}

.edgtf-header-standard .edgtf-menu-area .edgtf-vertical-align-containers .edgtf-side-menu-button-opener{
background-color:#fa7a02;
}


#two-column #left{
	float: left;
  	width: 48%;
}

#two-column #right{
  float: right;
width: 48%;

}

.wpcf7 input[type="date"]{
width: 50%;
padding-left:30px;
padding-right: 30px;  
}

.wpcf7 input[type="email"]{
width: 334px;
}
2

Sorry, but I don’t understand what you’re asking. What do you mean by “squeeze”?

3

Oh I am sorry, right now its fully stretched from left to right.

I want the form to be in center.

thanks.

4

You can add a width to div.wpcf7 and set the margins to auto to centre it. Like this:

div.wpcf7 {
    margin: 0 auto;
    padding: 0;
    width: 75%;
}

(You can set the width to whatever you want; 75% was just an example.)

5

thanks for replying. ohk and I should replace it with some code or just add it ?

6

Your current styles have

div.wpcf7 {
    margin: 0;
    padding: 0;
}

You need to add the parts I gave you.

I don’t work with WordPress, but as I understand it, you should be building a “child theme”, and adding your own styles in there, rather than editing the WP theme directly.

1 Like
7

Yes, if you want your changes to survive updates that would otherwise replace your changed files.

Hacking and re-uploading isn’t so bad if only a few things have been changed and updates are infrequent, but even that can get old fast even when it’s not on the scale of being a “maintenance nightmare”

1 Like
9

I also want to increase the space between end of blue part and the bottom logo. thanks again.

10

What browser are you using?

11

chrome. But, I tried in mozilla and safari as well. Its same in all of them.

12

Is this what you mean?

If so, you can do that by adding a small amount of padding to .aligncenter.

1 Like
13

Now, I am done. thanks everyone.

14

For future reference, Chrome comes with a very good Developer Tool that can do a lot of things.

For example, you can Inspect an element see its mark-up, its “selector path” and what CSS is being applied to it.

1377Ă—779 192 KB

IMHO a very good tool to get acquainted with.

Great!

1 Like
15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.