It seems you wrote inline CSS for contact page so please remove them and add a class to that div for example we can say “contact-left” and “contact-right” divs.
.contact-left{
width: 50%; padding: 0 10px 0 0; float: left;
}
.contact-right{
width: 50%; padding: 0 10px 0 0; float: right;
}
//CSS for mobile device
@media screen and (max-width: 480px){
.contact-left{
width:100%;
float:none;
}
.contact-right{
width:100%;
float:none;
}
}
I can’t understand your query about footer so please explain.
Let us know if you need help with anything else!
Hello,
Thank you for the help!
I dont understand how i put the code above on my page. This is my current code on the contactpage:
<div style="width: 50%; padding: 0 10px 0 0; float: left;">[ninja_form id=1]</div>
<div style="width: 40%; padding: 0 10px 0 0; float: right;">
<h4></h4>
<h4>Kom met ons in contact</h4>
Wil je meer informatie of heb je een vraag?
Neem dan via onderstaand contactformulier contact op met Vakantiewoning Hielsema. Uiteraard zijn wij ook telefonisch bereikbaar.
<strong>Adres:</strong>
Pellentesque in ipsum
<hr />
<strong>Telefoonnummer:</strong>
Pellentesque in ipsum
<hr />
<strong>Email:</strong>
Pellentesque in ipsum
<hr />
U kunt via de website van <a href="https://www.aanzee.com/nl/vakantiehuis-nederland/jelsum/hielsema.htm">Belvilla reserveren.
</a>
</div>
The footer on my website for example on the contactpage is on my opinion too big (lenght). Is there a code to make it smaller? On mobile devices the footer size is good.
Hello
Replace your code with the below code
<div class="contact-left">[ninja_form id=1]</div>
<div class="contact-right">
<h4>Kom met ons in contact</h4>
Wil je meer informatie of heb je een vraag?
Neem dan via onderstaand contactformulier contact op met Vakantiewoning Hielsema. Uiteraard zijn wij ook telefonisch bereikbaar.
<strong>Adres:</strong>
Pellentesque in ipsum
<hr />
<strong>Telefoonnummer:</strong>
Pellentesque in ipsum
<hr />
<strong>Email:</strong>
Pellentesque in ipsum
<hr />
U kunt via de website van <a href="https://www.aanzee.com/nl/vakantiehuis-nederland/jelsum/hielsema.htm">Belvilla reserveren.
</a>
</div>
Add the following CSS to Appearance -> customize -> Additional CSS through your WordPress dashboard
.contact-left{
width: 50%; padding: 0 10px 0 0; float: left;
}
.contact-right{
width: 50%; padding: 0 10px 0 0; float: right;
}
//CSS for mobile device
@media screen and (max-width: 480px){
.contact-left{
width:100%;
float:none;
}
.contact-right{
width:100%;
float:none;
}
}
let me know if you require any further assistance.
Hello,
Thank you for your help. I put your codes on my website but now the right box is under the contactform. Do you know how to fix it. You can see it on my website how it looks now.
Piter
I said to use @media screen and (max-width: 480px) media query and you are using @media only screen and (min-width: 992px)
That’s the reason please follow what I said.
