Problem: My Google form is cut off on mobile phones. End users are having a difficult time understanding the iframe is scrollable.
What I have tried: I have been searching online for ideas. I tried height: 1000px and height: 100% both with no luck.
Goal of this post: I am hoping someone can show me how to display the full length of the Google form without compromising the responsiveness of the site.
I have added a screenshot of what I see on my phone.
#headerText {
text-align: center;
font-size: 2.2rem;
padding-top: .7%;
}
.img-fluid {
max-width: 100%;
height: auto;
padding: 15px 0 15px 0;
}
.bg {
background: url(https://subtlepatterns.com/patterns/kindajean.png);
width: auto;
}
.boxWhite {
background-color: white;
font-size: 20px;
text-align: center;
font-family: 'Montserrat', sans-serif;
}
.text-primary {
background-color: white;
width: 400px;
justify-content: center;
font-family: 'Montserrat', sans-serif;
}
#googleForm {
height: 1000px;
}
.button {
padding: 30px 0 80px 0;
font-family: 'Montserrat', sans-serif;
}
.seanText {
background: white;
color: #007BFF;
font-size: 20px;
text-align: center;
word-spacing: 1.2px;
padding: 20px 10% 20px 10%;
font-family: 'Montserrat', sans-serif;
}
.iframe {
margin-left: 3%;
margin-top: 6%;
}
#header {
font-family: 'Montserrat', sans-serif;
height: 90px;
background-color: #007BFF;
height: 120px;
padding-top: 2%;
}
.iframeSean {
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Sean Is Getting Married</title>
</head>
<body>
<div id="header">
<div id="headerText">
<a href="http://seanisgettingmarried.com" class="text-center bg-primary text-white headerText">Sean Brown's
Bachelor Party</a>
</div>
</div>
<div class="d-flex justify-content-center">
<div class="embed-responsive embed-responsive-1by1 iframe">
<iframe class="embed-responsive-item iframeSean"
src="https://docs.google.com/forms/d/e/1FAIpQLScQ2hk1LN-1ZY1s9hmltqaIx5p8NSHJyE1-1mz-HSJ-sDMDGg/viewform?embedded=true"
width="640" height="1103" frameborder="0" marginheight="0" marginwidth="0"> Loading…</iframe>
</div>
</div>
</body>
</html>
Increase the Height:
<iframe class="embed-responsive-item iframeSean"
src="https://docs.google.com/forms/d/e/1FAIpQLScQ2hk1LN-1ZY1s9hmltqaIx5p8NSHJyE1-1mz-HSJ-sDMDGg/viewform?embedded=true"
width="640" **height="2500"** frameborder="0" marginheight="0" marginwidth="0"> Loading…</iframe>
Thanks
Please Change width to 100% and height to 500px
Loading…
Related
Working on a project for my bootcamp course, I was using my MacBook when writing the code for the index and it looked great. I have now switched over to my desktop and realized the footer is not at the bottom of my page. I have tried googling a solution but thus far nothing has worked to fix this. I also would have loved for my image links to have been a bit closer together but after playing around with the code, it doesn't seem to move. I also realized when making adjusting browser size it looks a bit off. I would greatly appreciate some assistance with this.
html {
background-image: url(https://wallpaperaccess.com/full/2510671.jpg);
background-size: cover;
background-repeat: no-repeat;
overflow: auto;
}
html body {
margin: 0;
height: 100%;
overflow: scroll;
}
.container {
max-width: 100%;
width: 100%;
}
h1 {
color: rgb(85, 13, 134);
font-family: 'Patrick Hand', cursive;
font-size: 80;
text-align: center;
font-weight: 900px;
border-style: rounded;
border-color: bisque;
border: solid;
background-color: rgba(230, 181, 213, 0.726);
border-radius: 10em;
border-width: 3;
padding: 2;
width: 900px;
height: 110px;
margin: auto;
margin-top: 30;
letter-spacing: 2;
}
#left {
display: flex;
justify-content: center;
padding: 160;
float: left;
margin-inline-start: auto;
}
#right {
display: flex;
justify-content: center;
padding: 160;
float: right;
margin-inline-start: auto;
}
img {
height: 200px;
width: 400px;
}
footer {
text-align: center;
color: rgb(85, 13, 134);
font-family: 'Patrick Hand', cursive, Arial, Helvetica, sans-serif;
font-size: 16;
font-weight: 60px;
letter-spacing: 2;
postion: fixed
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap" rel="stylesheet">
<title>Cheatsheet</title>
</head>
<header>
<h1>HTML and CSS Cheatsheet</h1>
</header>
<body>
<div>
<a href="HTML /index.html">
<img src="images/HTML logo.svg" id="left" width="800" height="200"></a>
</div>
<div>
<a href="CSS Sheet/index.html">
<img src="images/CSS Logo.svg" id="right" width="800" height="200"></a>
</div>
<footer>
<p>Created by: Stephanie M.</p>
<p>Connnect with me: stephanie678#gmail.com</p>
</footer>
</body>
</html>
To have the footer be at the bottom of the page, try using fixed positioning and bottom: 0;, along with 100% width so that its content can be centered as you have right now:
html {
background-image: url(https://wallpaperaccess.com/full/2510671.jpg);
background-size: cover;
background-repeat: no-repeat;
overflow: auto;
}
html body {
margin: 0;
height: 100%;
overflow: scroll;
}
.container {
max-width: 100%;
width: 100%;
}
h1 {
color: rgb(85, 13, 134);
font-family: 'Patrick Hand', cursive;
font-size: 80;
text-align: center;
font-weight: 900px;
border-style: rounded;
border-color: bisque;
border: solid;
background-color: rgba(230, 181, 213, 0.726);
border-radius: 10em;
border-width: 3;
padding: 2;
width: 900px;
height: 110px;
margin: auto;
margin-top: 30;
letter-spacing: 2;
}
#left {
display: flex;
justify-content: center;
padding: 160;
float: left;
margin-inline-start: auto;
}
#right {
display: flex;
justify-content: center;
padding: 160;
float: right;
margin-inline-start: auto;
}
img {
height: 200px;
width: 400px;
}
footer {
text-align: center;
color: rgb(85, 13, 134);
font-family: 'Patrick Hand', cursive, Arial, Helvetica, sans-serif;
font-size: 16;
font-weight: 60px;
letter-spacing: 2;
position: fixed;
bottom: 0;
width: 100%;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap" rel="stylesheet">
<title>Cheatsheet</title>
</head>
<header>
<h1>HTML and CSS Cheatsheet</h1>
</header>
<body>
<div>
<a href="HTML /index.html">
<img src="images/HTML logo.svg" id="left" width="800" height="200"></a>
</div>
<div>
<a href="CSS Sheet/index.html">
<img src="images/CSS Logo.svg" id="right" width="800" height="200"></a>
</div>
<footer>
<p>Created by: Stephanie M.</p>
<p>Connnect with me: stephanie678#gmail.com</p>
</footer>
</body>
</html>
try this:
footer {
text-align: center;
color: rgb(85, 13, 134);
font-family: 'Patrick Hand', cursive, Arial, Helvetica, sans-serif;
font-size: 16;
font-weight: 60px;
letter-spacing: 2;
postion: fixed
//add this
bottom: 0;
left: 0;
}
Hi im a begginer web developer and im making a practice.I want to change my span's label color when i hover to "container" ( btw i also want to change my border's properties as you can see in my code (container :hover))
I hope I explained myself well
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap');
/* font-family: 'Open Sans', sans-serif;*/
body{
background-color: #14213d;
margin: 0;
}
.container li{
list-style: none;
}
.container{
border: 2px solid #fca311;
width: 400px;
height: 100px;
position: relative;
left: 720px;
top: 400px;
}
#mainm{
font-family: 'Open Sans', sans-serif;
color: #e63946;
font-size: 25px;
padding-left: 5px;
padding-top: 15px;
}
.container:hover{
transition: 2s;
border-radius: 15px;
border-color: #43aa8b;
background-color: #43aa8b;
}
#mainm:hover{
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<ul>
<li id="mainm">Site Hazırlanma Aşamasında</li>
</ul>
</div>
</body>
</html>
Move the container styles to #mainm and add the color: white; to :hover.
Make note of the other styles I changed to clean it up a bit. I added text-align: center; to the id and removed the height. Instead of a fixed height just use padding.
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap');
/* font-family: 'Open Sans', sans-serif;*/
body {
background-color: #14213d;
margin: 0;
}
.container li {
list-style: none;
}
.container {
width: 100%;
height: 100%;
}
li#mainm {
border: 2px solid #fca311;
width: 400px;
padding: 30px 0px;
position: relative;
left: 720px;
top: 400px;
}
#mainm {
font-family: 'Open Sans', sans-serif;
color: #e63946;
font-size: 25px;
text-align: center;
}
#mainm:hover {
transition: 2s;
border-radius: 15px;
border-color: #43aa8b;
color: white;
background-color: #43aa8b;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<ul>
<li id="mainm">Site Hazırlanma Aşamasında</li>
</ul>
</div>
</body>
</html>
:root {
--colorsame: #1e90ff;
}
.container{
border: 2px solid var(--colorsame);
width: 400px;
height: 100px;
position: relative;
left: 720px;
top: 400px;
}
#mainm{
font-family: 'Open Sans', sans-serif;
color: var(--colorsame);
font-size: 25px;
padding-left: 5px;
padding-top: 15px;
}
I have made this website as a practice portfolio website for myself and my website is pushed to the left whenever its smaller than particular size. it used to be around 600px but I removed the whole code and rewrote the website again but I checked it at early phases and still suffers from this problem which I cant find the reason for it. so I stopped coding and came straight here for help.
please help me this is the third time I'm trying to build this website and still have this problem.
something else i noticed is that althoug i have scroll x hidden i still have this tiny scroll to left when resizing the website.enter image description here
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: visible;
overflow-x: hidden;
margin: 0;
padding: 0;
box-sizing: border-box;
}
p {
color: rgb(218, 214, 214);
font-family: "Montserrat", sans-serif;
font-size: 1rem;
}
/*NAVBAR----------------------------------------------------------------------------------------*/
.navbar {
width: 100vw;
height: auto;
font-family: "Poppins", sans-serif;
font-weight: 500;
padding: 7px;
background-color: rgba(85, 85, 85, 0.116);
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.icon-list {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
}
.icon-list li {
text-align: center;
margin: 0 15px;
}
.icon-list a {
text-decoration: none;
color: rgb(180, 148, 158);
}
.icon-list a:hover {
opacity: 0.7;
}
.images {
width: 40px;
height: 40px;
}
/*INFO---------------------------------------------------------------------------------*/
.info {
font-family: "Montserrat", sans-serif;
margin-bottom: 200px;
padding: 100px;
text-align: center;
}
.info p {
margin: 0 40px;
line-height: 20px;
}
.info h1 {
font-weight: 600;
color: rgb(177, 164, 164);
font-weight: 300;
margin-bottom: 5px;
}
.info h2 {
color: rgb(192, 184, 153);
font-weight: 400;
}
.info h3 {
color: crimson;
font-weight: 500;
margin-top: 30px;
margin-bottom: 10px;
}
.shadow {
width: 80vw;
background-color: rgba(34, 33, 33, 0.336);
padding: 10px;
border-radius: 10px;
margin: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500;700;900&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,300;0,600;0,700;0,800;1,300;1,400;1,500&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ashkan Naeimipoor</title>
</head>
<link rel="stylesheet" href="./main.css">
<body>
<nav class="navbar">
<ul class="icon-list">
<li><img class="images" src="./images/navbar/home.png" alt=""><br>HOME</li>
<li><img class="images" src="./images/navbar/resume.png" alt=""><br>GET RESUME</li>
<li><img class="images" src="./images/navbar/about.png" alt=""><br>ABOUT</li>
<li><img class="images" src="./images/navbar/contact-book.png" alt=""><br>CONTACT</li>
</ul>
</nav>
<div class="container">
<div class="info">
<div class="shadow">
<h1>Ashkan Naeimipoor</h1>
<h2>Front-End Developer</h2>
<h3>Objective</h3>
<p>As a Front-End Developer, to be responsible for
producing high quality solutions for company customers; bringing growing understanding of Modern HTML, JavaScript, and CSS, and passionate ability to learn and develope
while working in the team of experts under a
skillful and talented management.</p>
</div>
</div>
</div>
</body>
</html>
Check your .info class, you are using 100px on padding. That's too large in smaller screen. You can reduce it using media query.
I'll also suggest changing .info class into:
.info {
font-family: "Montserrat", sans-serif;
margin-bottom: 200px;
padding: 100px 0;
text-align: center;
max-width: 1060px;
margin: 0 auto;
}
I am currently making my study project page. I want it to be responsive as it is a part of it.
However, when the screen size is to small words in head, section and body are overlapping. I can't make the words go to another line if there is not enough space for all of them (for whole sentence). I've tried using word-break, but it didn't work. Does anyone have idea what can I do to change it?
<html lang="pl-PL">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="css.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="My hobby page.">
<meta name="keywords" content="books, hobby">
<meta name="author" content="Bogna Gondek">
<link rel="stylesheet" href="css.css">
<script type="text/javascript" src="js.js"></script>
<title>Książki Moje Hobby | Witamy</title>
</head>
<body>
<header>
<h1>Książki Moje Hobby</h1>
<nav>
<ul>
<li><a class="aktywny" href="strona_główna.html">Strona Główna</a></li>
<li>Kontakt</li>
</ul>
</nav>
</header>
<div id="wnętrze">
<section>
<h2>„Bajki są więcej niż prawdą: nie dlatego, że mówią nam, że smoki istnieją, ale dlatego, że mówią, że smoki można pokonać.”</h2>
<h3>― Neil Gaiman, „Coraline"</h3>
</section>
</div>
<footer>
Książki Moje Hobby, Copywright © 2019
</footer>
</body>
</html>
body
{
font-family: Times, Courier, Verdana, Comic, Arial;
font-size: 20px;
line-height: 2px;
padding:0;
margin: 0;
background-color: white;
}
header
{
width: 100%;
margin: auto;
overflow: hidden;
padding-top: 20px;
min-height: 70px;
background-color: #404040;
}
header h1
{
margin-left: 20px;
float:left;
color: #f2f2f2;
}
header nav
{
float:right;
margin-top:10px;
margin-right: 20px;
margin-bottom: 20px;
}
header li
{
float:left;
display:inline;
padding: 0 20px 0 20px;
}
header a
{
text-decoration: none;
color: #f2f2f2;
font-size: 22px;
}
header a:hover
{
font-weight: bold;
}
header .aktywny
{
color: #b3b3b3;
}
div#wnętrze
{
max-width:100%;
height: 100%;
margin: auto;
overflow: hidden;
background:url("obrazki/glownyobrazek.jpg") no-repeat 0;
color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
section
{
background-color: red;
max-width: 80%;
word-wrap: break-all !important;
}
footer
{
padding: 20px;
margin-top: auto;
background-color: #404040;
text-align: center;
color: #f2f2f2;
}
The issue is the line-height you have set on the body.
body
{
font-family: Times, Courier, Verdana, Comic, Arial;
font-size: 20px;
line-height: 1;
padding:0;
margin: 0;
background-color: white;
}
I have 3 items (boxes) within my flexbox that I want to use as hyperlinks. However, when I wrap the in tags it completely breaks the layout. How can I set each item (box) as a hyperlink so that users can click the entire area and it takes them to another website? As of now, I have the text within the boxes set as links. But I want to use the entire box as a link.
Here is a codepen for it: https://codepen.io/mrhoward/pen/dqqOxj
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="shortcut icon" href="img/misc/favicon.png">
<meta name="description" content="">
<meta name="author" content="">
<title>Flexbox Problem.</title>
<link href="css/ton.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P|Open+Sans">
</head>
<body>
<h1 class="col">Each Square as Hyperlink</h1>
<h2 class="col">This is getting annoying</h2>
<div class="maincontain">
<div class="col gaming"><h3 class="title">1</h3></div>
<div class="col music"><h3 class="title">2</h3></div>
<div class="col dev"><h3 class="title">3</h3></div>
</div>
</body>
</html>
CSS:
body {
background: #333;
color: #fff;
padding: 20px;
}
a {
text-decoration: none;
}
/* FLEXBOX */
* {
box-sizing: border-box;
}
.col {
padding: 20px;
}
.maincontain {
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
justify-content: space-between;
}
.maincontain .col {
width: 32%;
height:400px;
align-items: stretch;
}
#media only screen and (max-width: 40em) {
.maincontain {
flex-direction: column;
height: 300px;
margin: 0 0 10px 0;
}
}
#media only screen and (max-width: 40em) {
.maincontain .col {width: 100%;}
.maincontain h3 { font-size: 1.3vh}
}
/* Item Stylig */
.gaming {
background: #d836eb;
}
.music {
background: #0000ff;
}
.dev {
background: #00ff00;
}
/* Font Styling */
h1 {
font-size:5vw;
font-family: 'Open Sans', sans-serif;
font-weight: lighter;
text-align: center;
padding: 50px;
}
h2 {
font-size:2vw;
font-family: 'Press Start 2P', cursive;
text-align: center;
padding: 0px 0px 20px 0px;
}
h3 {
font-size: 1.3vw;
font-family: 'Press Start 2P', cursive;
padding-top: 10px;
object-fit: cover;
}
.title{
color: white;
text-shadow: 1px 1px 4px #000000;
}
check this example:
<div id="select">
<p class="options left">
<a id="leftq" href="#selectionSet">the quick brown fox jumps over the lazy</a>
</p>
<p class="options right">
<a id="rightq" href="#selectionSet">dog</a>
</p>
</div>
#select {
color: #fff;
float: left;
height: 188px;
width: 631px;
}
#select p.options {
color: #FFFFFF;
float: left;
font-family: 'ComfortaaBold',cursive;
font-size: 20px;
height: 100%;
margin: 0 auto;
text-align: center;
width: 48%;
}
p.options.left {
align-items: center;
background: none repeat scroll 0 0 #EBEBEB;
border-bottom-left-radius: 100px;
border-right: 2px solid #FFFFFF;
border-top-left-radius: 100px;
display: flex;
justify-content: center;
padding-left: 5px;
padding-right: 5px;
}
p.options.right {
align-items: center;
background: none repeat scroll 0 0 #EBEBEB;
border-bottom-right-radius: 100px;
border-left: 2px solid #FFFFFF;
border-top-right-radius: 100px;
display: flex;
justify-content: center;
padding-left: 5px;
padding-right: 5px;
}
#select p.options a {
color: #636363;
padding: 80px 0;
text-decoration: none;
display:block;
width:100%;
}
#select p.options a:hover {
color: #FFFFFF;
}
p.options.right:hover, p.options.left:hover {
background-color: #00AEEF !important;
}
.rightq {
width: 100%;
}
Below is a link to a pen I forked and saved =>
https://codepen.io/kipomaha/pen/OooWXL
Below is the HTML, I changed the class from the div and put it onto the a element that I wraps the div.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="shortcut icon" href="img/misc/favicon.png">
<meta name="description" content="">
<meta name="author" content="">
<title>Flexbox Problem.</title>
<link href="css/ton.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P|Open+Sans">
</head>
<body>
<h1 class="col">Each Square as Hyperlink</h1>
<h2 class="col">This is getting annoying</h2>
<div class="maincontain">
<div><h3 class="title">1</h3></div>
<div><h3 class="title">2</h3></div>
<a class="col dev" href="#"><div><h3 class="title">3</h3></div></a>
</div>
</body>
</html>
Try adding the <a> tag inside <h3> element like below
<h3><a hrer =""><a></h3>
With
. maincontain a{
display :block;
}