I'm facing a dilemma...
No matter what I do, I can't seem to position my contact form over my Google iframe perfectly. It works fine if I don't mind sacrificing responsiveness, but as soon as I try to make it responsive, the absolute assignment keeps it fixed in place despite screen size changes...
Any suggestions on how I can make it fully responsive regardless of screen size?
/*font additions*/
@font-face{
font-family : "Roboto";
src : url('./fonts/Roboto-Black.ttf');
}
@font-face{
font-family : "RobotoBold";
src : url('./fonts/Roboto-Bold.ttf');
}
@font-face{
font-family : "RobotoThin";
src : url('./fonts/Roboto-Thin.ttf');
}
@font-face {
font-family: 'FontAwsome';
src: url('./fonts/fontawsome-webfont.eot');
src: url('./fonts/fontawsome-webfont.woff') format('woff'),
src: url('./fonts/fontawsome-webfont.ttf') format('truetype'),
src: url('./fonts/fontawsome-webfont.otf') format('otf'),
src: url('./fonts/fontawsome-webfont.svg') format('svg');
}
/*media queries for responsiveness*/
@media(max-width:767px){
.asside, nav
{
display: flex;
flex-wrap: wrap;
padding-left: 3%;
}
.nav
{
display: flex;
flex-wrap: wrap;
margin: 0px;
...
/*global body font styling*/
body
{
padding: 0;
margin: 0;
font-family: "RobotoBold", sans-serif;
font-size: 1em;
}
more CSS code....
</footer>
</body>
</html>