I have the mobile version of a static page looking good (although I am not sure if the HTML setup is ideal). I took the button out of the the .product-info class so I could use flexbox's order property and move it to below the product image on mobile. However, this leaves me unsure of how to go about styling the desktop version. I'm trying to get .product-info (blue), the 'get' button, and .store-info (green) each on their own separate lines. What is the best way to structure and style for the desktop version using flexbox without affecting the mobile layout? Thanks!
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Snapshelf</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="product-page.css" type="text/css">
</head>
<body>
<!-- Navigation -->
<nav class="header navbar navbar-light bg-faded">
<div class="nav navbar-nav container">
<a class="nav-item nav-link active" href="#">Snapshelf <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#" style="float: right">Store Account</a>
</div>
</nav>
<!-- Holds product image and information -->
<div class="product container">
<!-- Displays front or back of product -->
<div class="product-image">
<img src="front.jpg" class="main-image img-fluid" alt="" />
<img src="back.jpg" class="secondary-image" alt=""/>
</div>
<!-- Displays product information -->
<div class="product-info">
<p class="brand-name"><b>Brand Name</b></p>
<p class="product-desc">Product Name</p>
<p class="price">$100</p>
</div>
<!-- Get button -->
<div>
<button class="get-button btn btn-default btn-lg">Get</button>
</div>
<!-- Store information -->
<div class="store-info">
<div>
<b>From</b><br>
Store Name
</div>
<div style="margin-top: 10px">
<b>Where</b><br>
Store Location<br>
www.storeurl.com
</div>
</div>
</div>
</body>
</html>
CSS
/* Large screens */
#media only screen and (min-width: 768px) {
.body {
font-family: 'Roboto', sans-serif;
}
.header {
margin-bottom: 40px;
border: 1px solid green;
}
.product {
display: flex;
border: 1px solid red;
}
.product-info {
border: 1px solid blue;
}
.get-button {
margin-top: 20px;
border-radius: 2px;
}
.product-image {
display: flex;
flex-direction: column;
}
.main-image {
height: 500px;
width: 500px;
margin-right: 20px;
}
.secondary-image {
height: 150px;
width: 150px;
margin-top: 20px;
}
.price {
margin-top: 10px
}
.store-info {
border: 1px solid green;
border-radius: 2px;
padding: 10px;
margin-top: 40px;
text-align: center
}
}
Just set your flexbox container to flex-direction: column in your desktop media query.
#media only screen and (min-width: 768px) {
.product {
display: flex;
flex-direction: column;
border: 1px solid red;
}
}
Related
I am fairly new to coding and have a specific issue that I cannot figure out. I have a container that I want positioned differently based on the screen size. For large and mid-sized screens, I want the container left justified with a small amount of padding from the left edge, and on small screens, I want the container centered. I am using bootstraps, html, and css. See my style and code below. The container is overtop of a background image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Website Name</title>
<!-- MDB icon -->
<link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" />
<!-- Google Fonts Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500;700&display=swap" />
<!-- MDB -->
<link rel="stylesheet" href="css/mdb.min.css" />
</head>
<style>
#media (min-width: 100%) {
#intro {
min-width: 100%;
margin-right: none;
margin-top: -58.59px;
background-color: none;
}
}
.alfa {
position: absolute;
max-width: inherit;
margin-top: 55vh;
align-items: center;
justify-content: center;
background-color: white;
color: black;
border: lightgrey;
border-style: solid;
border-width: thin;
border-radius: 0em;
font-size: 1em;
padding: 1rem 1rem 1rem 1rem;
box-shadow: 0 0 20px black
}
.no-pad {
margin-right: 0rem;
margin-left: 0rem;
}
.navbar-brand {
margin-left: 1rem;
}
.nav-item {
margin-right: 1rem;
}
.row {
font-size: 1.5em;
}
.main-button {
display: inline-flex;
align-items: center;
justify-content: center;
}
#button1 {
font-size: 1.5em;
}
</style>
<body>
<!-- Header Bar -->
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="">My Accounting Exec</a>
<!--Toggle Button-->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i title="" class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item text-center"><a class="nav-link" href="" style="color:white;">Services</a></li>
<li class="nav-item text-center"><a class="nav-link" href="" style="color:white;">Pricing</a></li>
<li class="nav-item text-center"><a class="nav-link" href="" style="color:white;">About</a></li>
<li class="nav-item text-center"><a class="nav-link" href="" style="color:white;">Contact</a></li>
</ul>
</div>
</nav>
</header>
<!-- Background-Image -->
<container>
<div class="bg-image" style="background-image: url('../MDB5-STANDARD-UI-KIT-Free-3.5.1/img/Accountant.jpg'); height: 89vh;">
<div class="Alert-Box text-center">
<div class="alfa text-center;">
<h5><b>Text Text Text</b></h5>
<div><button id="button1" type="button" class="btn btn-primary">WE ARE HERE FOR YOU!</button></div>
</div>
</div>
</div>
</container>
<!-- Service Links -->
<div class="row no-pad text-center">
<div class="col-lg-3 col-md-3 col-sm-12 d-flex align-items-center justify-content-center" style="border: solid .5px grey;
background-color: lightgrey;
height: 4.5rem;
padding: 0;">
</style>
<button href="" style="border: none; background-color: rgb(210, 210, 210); height: 100%; width: 100%; padding-left: 0mm;">
<b>Service 1</b></button>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 d-flex align-items-center justify-content-center" style="border: solid .5px grey;
height: inherit;
background-color: lightgrey;
height:4.5rem;
padding: 0;">
</style>
<button href="" style="border: none; background-color: rgb(180, 180, 180);height: 100%; width: 100%; padding-left: 0mm;">
<b>Service 2</b></button>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 d-flex align-items-center justify-content-center" style="border: solid .5px grey;
height: inherit;
background-color: lightgrey;
height:4.5rem;
padding: 0;">
</style>
<button href="" style="border: none; background-color: rgb(160, 160, 160); height: 100%; width: 100%; padding-left: 0mm;">
<b>Service 3</b></a>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 d-flex align-items-center justify-content-center"
style="border: solid .5px grey;
height: inherit;
background-color: lightgrey;
height:4.5rem;
padding: 0;"></style>
<button href=""
style="border: none; background-color: rgb(140, 140, 140); height: 100%; width: 100%; padding-left: 0mm;">
<b>Service 4</b></a>
</div>
</div>
<!-- End your project here-->
<!-- MDB -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript"></script>
<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</body>
</html>
Without reading through all of your code, you need proper media queries that establish generalized rules and mobile only rules: ie
.container {
/* CODE TO LEFT ALIGN CONTENT + padding */
}
#media only screen and (max-width: 768px) {
.container {
/* CODE TO CENTER CONTENT*/
}
}
That way you can have generalized rules and target specific screen size treshholds.
Hope that makes sense for you.
I'm using basic HTML, CSS and Javascript to create a simple web app. As I tried text-align: center and other CSS elements to center the button, I'm still having trouble.. I'm also trying to center a text inside the box center, but doesn't work for unknown reason. So far, I have used margin-left and margin-right to adjust the button but willing to know how to center it without going through all these hassle.
.image {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
margin-top: 40px;
margin-left: 50px;
}
.image img {
cursor: pointer;
}
.image img:hover {
border: solid 2px #1e88e5;
border-radius: 2px;
}
.image #mother img:hover {
border: solid 2px #1e88e5;
border-radius: 2px;
}
.image img {
width: 100px;
height: 100px;
text-align: center;
padding: 10px;
margin-left: 30%;
}
.button{
width: 80px;
height: 40px;
text-align: center;
margin: auto;
display: flex;
padding-top: 8px;
padding-bottom: 8px;
background-color: rgb(43, 43, 219);
cursor: pointer;
border-radius: 2px;
}
.button:hover{
background-color: #242424;
}
.button:active{
background-color: #121212;
}
.button > span{
color: #eeeeee;
text-align: center;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>Good Cop, Bad Cop</title>
<style>
.view-image img {
margin-left: 90px;
}
</style>
<link rel="stylesheet" href="../CSS/landing.css" />
<link rel="stylesheet" href="../CSS/coach_selection.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.6.1/firebase-ui-auth.css" />
</head>
<body>
<nav class="navbar navbar-custom">
<div class="container-fluid">
<a class="navbar-brand" href="">
<img src="../IMAGES/Hamburger_icon.svg" alt="Character" height="35vh" />
</a>
<a href="settings.html">
<ul class="navbar-nav">
<img src="../IMAGES/bootstrap-icons-1.3.0/person-circle.svg" alt="Profile" height="45vh" />
</ul>
</a>
</div>
</nav>
<div class="image">
<div>
<button type="button" id="dog-button" class="btn btn-light">
<img src="../images/dog.png" id="dog" alt="dog">
</button>
</div>
<div>
<button type="button" id="mother-button" class="btn btn-light">
<img src="../images/mother.png" id="mother" alt="mother">
</button>
</div>
<div>
<button type="button" id="soldier-button" class="btn btn-light">
<img src="../images/military.png" id="soldier" alt="soldier">
</button>
</div>
<div>
<button type="button" id="teacher-button" class="btn btn-light">
<img src="../images/teacher.png" id="teacher" alt="teacher">
</button>
</div>
<div class="button" id="button-confirm">
<span>Confirm</span>
</div>
<div class="view-image" style="display:none;">
<img src="" width="150" height="150" />
<div class="button" id="button-other"><span>Other</span></div>
</div>
</div>
<div class="fixed-bottom">
<div class="navbar navbar-custom">
<div class="container-fluid">
<div id="grid">
<div class="bot-nav-img">
<a href="Journal/journal_main.html">
<img src="../IMAGES/bootstrap-icons-1.3.0/book-fill.svg" alt="Journal" height="40vh" />
</a>
</div>
<div class="bot-nav-img">
<a href="landing.html">
<img src="../IMAGES/bootstrap-icons-1.3.0/house-door-fill.svg" alt="Home" height="40vh" />
</a>
</div>
<div class="bot-nav-img">
<a href="goals.html">
<img src="../IMAGES/bootstrap-icons-1.3.0/table.svg" alt="Goals" height="40vh" />
</a>
</div>
</div>
</div>
</div>
</body>
</html>
The quickest and easiest way to create a perfect centre alignment in css is with flexbox.
The general pattern is, give the parent element that needs it's children centered a display: flex;, a justify-content: center;, and a align-items: center;
For your code, get rid of the all the text-align. Then to the .button class, which is already display: flex, add justify-content: center; and align-items: center;
The span element with your text is a child of the button, so it will now become centered. The span element itself will not need any CSS properties to help it center.
.button {
width: 80px;
height: 40px;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
padding-top: 8px;
padding-bottom: 8px;
background-color: rgb(43, 43, 219);
cursor: pointer;
border-radius: 2px;
}
Can you please check the below code? Hope it will work for you. You have to just add your button code outside the .image class and add margin to the button like
.button {
margin: 10px auto 0px;
}
Please refer to this link: https://jsfiddle.net/yudizsolutions/av9fn6tp/
This solution is working for me.
.button {
display : flex;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
margin: 0px auto 0px;
}
Been using bootstrap to try and have this section of my web page to display the images properly while shrinking the web page. They stay in line which is good, seems the col / row method with bootstrap really came thru; how can I get these to shrink with the page so that they may stay in formation longer, and look better overall when the web page has shrunk significantly?
the styles
h1 {
font-weight: bold;
font-size: 40px;
background-color: #4aaaa5;
padding: 15px;
color: #ffffff !important;
}
h2 {
font-size: 25px;
Color: #4aaaa5;
padding: 20px 20px 5px 20px;
}
#foot {
border-style: solid;
border-width: 10px 0px 0px 0px;
border-color: #4aaaa5;
padding-top: 20px;
color: #cccccc;
background-color: #666666;
text-align: center;
margin-top: auto;
}
.left {
display: inline-block;
position: relative;
padding: 0px;
margin: 20px;
}
h3{
position: absolute;
bottom: 5px;
font-size: 25px;
background-color: #4aaaa5;
padding: 15px 0px;
width: 100%;
color: #ffffff;
text-align: center;
}
body {
background-image: url("./hotel-wallpaper/hotel-wallpaper.png");
display: flex;
height: 100vh;
flex-direction: column;
}
.main{
display: block;
margin-top: 50px;
margin-bottom: 150px;
padding: 20px 20px 40px 20px;
background-color: #ffffff;
}
.borderr {
border-right: 2px solid #cccccc;
}
hr {
margin: 20px 0px 20px 0;
height: 1px;
border: 0px;
border-top: 3px solid #cccccc;
}
p {
margin-top: 20px;
line-height: 30px;
}
the html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="./assets/reset.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="./assets/Style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container col-xl-7 col-lg-8 col-md-9 col-sm-10">
<h1 class="navbar-brand"> My Name </h1>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item borderr">
<a class="nav-link" href="./index.html"> About me <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active borderr">
<a class="nav-link" href="./portfolio.html">Portfolio</a>
</li>
<li class="nav-nav-link">
<a class="nav-link" href="./contact.html">
Contact
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<div class="main container col-xl-7 col-lg-8 col-md-9 col-sm-10">
<h2> Portfolio </h2>
<hr>
<div class="row">
<div class="left">
<img src="https://www.peta.org/wp-content/uploads/2017/05/Kenny-4-602x399.jpg" alt="White Liger" width="100%" height="100%"
style="max-width: 300px; max-height: 200px;">
<h3> liger </h3>
</div>
<div class="left">
<img src="https://twistedsifter.files.wordpress.com/2012/01/savannah_cat_closeup.jpg?w=800&h=507&zoom=2"
alt="Savannah" width="100%" height="100%" style="max-width: 300px; max-height: 200px;">
<h3>Savannah</h3>
</div>
<div class="left">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/XJ-B1_Beefalo.jpg/1920px-XJ-B1_Beefalo.jpg"
alt="Beefalo" width="100%" height="100%" style="max-width: 300px; max-height: 200px;">
<h3> Beefalo </h3>
</div>
<div class="left">
<div class="pic">
<img src="https://shoeuntied.files.wordpress.com/2017/12/rama2.jpg" alt="Cama" width="100%" height="100%" style="max-width: 300px; max-height: 200px;">
<h3>Lama camel</h3>
</div>
</div>
<div class="left">
<img src="https://i0.wp.com/metro.co.uk/wp-content/uploads/2018/11/sei_38307333-0b17.jpg?quality=90&strip=all&zoom=1&resize=644%2C471&ssl=1"
alt="Zonkey" width="100%" height="100%" style="max-width: 300px; max-height: 200px;">
<h3> Zonkey</h3>
</div>
</div>
</div>
</main>
<footer id="foot">
Copyright ©
</footer>
</body>
</html>
Thanks -
use Col-md-(media-dependent-length) for setting up row div length with image width full to 100%
Check Bootstrap Docs
Add class="img-fluid" to the image tag as :
<img class="img-fluid">
This will make images responsive which therefore shrink and expand based on the window size. Also, setting max-height and max-width as per your code will fix the max size.
But while shrinking the window size, it will reduce the size.
Regarding the images, refer this link from the official documentation of bootstrap.
I made a footer with html, css and bootstrap and it's responsive to some kind of exctent but when it gets to mobile size instead of the images being in a row they stack up and gets in a column, how can i fix this? I want i to be the same when it comes down to mobile size as it is when it is in desktop size. I hope you understand, sorry for my bad english. Here is the html:
/*Facebook*/
.fb-icon img {
width: 60px;
height: 60px;
display: block;
margin: auto;
}
/*Twitter*/
.twitter-icon img {
width: 60px;
height: 60px;
display: block;
margin: auto;
}
/*Mail*/
.mail-icon img {
width: 60px;
height: 60px;
display: block;
margin: auto;
}
.container {
margin-top: 120px;
width: 30%;
}
#media (max-width: 767px) {
/*Facebook*/
.fb-icon img {
width: 70px;
height: 70px;
display: block;
margin: auto;
padding: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<footer class="container">
<div class="row">
<!-- Facebook -->
<div class="col-sm-4 col-xs-4">
<a target="_blank" class="fb-icon" href="https://www.facebook.com/OxybinTravel"><img onmouseover="this.src='Travel/facebook-2-color.png'" onmouseout="this.src='Travel/facebook-2.png'" alt="Facebook icon" src="Travel/facebook-2.png"></a>
</div>
<!-- Twitter -->
<div class="col-sm-4 col-xs-4">
<a target="_blank" class="twitter-icon" href="https://twitter.com/oxybintravel"><img onmouseover="this.src='Travel/p-color.png'" onmouseout="this.src='Travel/p.png'" alt="Twitter icon" src="Travel/p.png"></a>
</div>
<!-- Mail -->
<div class="col-sm-4 col-xs-4">
<div class="tool-tip">
<a target="_blank" class="mail-icon" href="#"><img onmouseover="this.src='Travel/email-color.png'" onmouseout="this.src='Travel/email.png'" alt="Mail icon" src="Travel/email.png"></a>
</div>
</div>
</div>
</footer>
By default, if you check your bootstrap you will see that bootstrap is using col-sm-4 on mobile devices and has a max-width: 100% css property. Just add this css snipped into your media query
#media (max-width: 767px) {
/*Facebook*/
.col-sm-4 {
max-width:33.3%;
display:inline-block;
}
....
}
I can use some help as I am new to html coding. anyway,
I've made a carousel with bootstrap. The carousel itself works fine. But after placing a button in the carousel, (using top: (px) and right: (px) as I don't know how to place it where I want otherwise)it still works fine. Until I start resizing the window. The background becomes smaller, but the button kind of stays the same size. So it starts moving around and what once were 2 buttons next to eachother, are now 2 buttons with alot of space between them. Here, have a look at my code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width = device-width, initial-scale = 1">
<title>Galaxy</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<style type="text/css">
</style>
</head>
<body>
<div id="theCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#theCarousel" data-slide-to="0" class="active"></li>
<li data-target="#theCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="galaxy3.jpg">
<div class="slide1"></div>
<div class="carousel-caption">
<div class="bannertext">
<h1>Santorodesign</h1>
<p>A website made by Michael</p>
<div class="mobileHide"> <button id="headerbutton-nederlands">Nederlands</button></div>
<div class="mobileHide"> <button id="headerbutton-english">English</button></div>
</div>
</div>
</div>
<div class="item">
<div class="slide2"></div>
<img src="galaxy2.jpg">
<div class="carousel-caption">
<div class="bannertext2">
<h1>Explore the galaxy<h1>
</div>
</div>
</div>
<a class="left carousel-control" href="#theCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#theCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<div id="firstrow">
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img id="mercury" src="mercury.png"> <br>
(text) <br>
<button type="submit" class="btn-primary btn-lg">Learn more about Mercury</button>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img id="earth" src="earth.png"> <br>
(text)<br>
<button type="submit" class="btn-primary btn-lg">Learn more about the Earth</button>
</div>
<div class="planet col-lg-4 col-md-4 col-sm-6 col-xs-12">
<img id="venus" src="venus.png"> <br>
(text) <br>
<button type="submit" class="btn-primary btn-lg">Learn more about Venus</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS
.carousel-control.left, .carousel-control.right {
background-image: none
}
#firstrow {
font-size: 2em;
padding: 100px 0 0 0;
width: 100%;
height: 550px;
text-align: center;
color: black;
background: #DCDCDC;
position: relative;
}
#media all and (max-width: 900px) {
#headerbutton-nederlands { display: none; }
#headerbutton-english { display: none; }
}
.planet {
margin-bottom: 30px;
position: relative;
}
.planet img {
height: 300px;
max-width: none;
}
.bannertext {
font-size: 1.3em;
line-height: 15px;
}
.bannertext h1 {
font-size: 2em;
}
.bannertext2 {
font-size: 2em;
}
.mobileShow { display: none;}
.mobileHide { display: inline;}
/* Smartphone Portrait and Landscape */
#media only screen
and (max-device-width : 480px){
.mobileShow { display: inline;}
.mobileHide { display: none;}
.planet img{
height: 200px;
}
}
#headerbutton-nederlands {
position: absolute;
font-weight: bold;
bottom: 35px;
right: -90px;
-webkit-border-radius: 5px;
line-height: 50px;
color: white;
background-color: #778899;
width: 13%;
text-align: center;
border: white 2px solid ;
}
#headerbutton-english {
position: absolute;
font-weight: bold;
bottom: 35px;
right: 100px;
-webkit-border-radius: 5px;
line-height: 50px;
color: white;
background-color: #778899;
width: 13%;
text-align: center;
border: white 2px solid ;
}
basically what I want is that the buttons + the text inside of the buttons also resize when the window becomes smaller. As if the buttons are a part of the image.
Thank you for your time.
-Michael
If you want the buttons to scale relative to the size of the screen, you need to style them with relative units instead of pixels. You can use, % to size them relative to their parent element, em or rem to size them relative to the size of the font, or --most likely for your needs-- vh or vw to scale them relative to the height and width of the viewport, respectively.
Assuming your initial styles work on a viewport 1140px wide (just an arbitrary starting point), the following CSS may get you headed in the right direction:
#headerbutton-nederlands {
position: absolute;
font-weight: bold;
bottom: 3vw;
right: -8vw;
-webkit-border-radius: .5vw;
line-height: 4.3vw;
color: white;
background-color: #778899;
width: 13%;
text-align: center;
border: white 2px solid ;
}
You need to add position: relative; property to the .bannertext element. What this does is when a child element is absolutely positioned inside a relatively positioned parent, it makes sure the child element stays relative from the bounds of the parent. So change .bannertext in your CSS to the following and it should work.
.bannertext {
font-size: 1.3em;
line-height: 15px;
position: relative;
}
You may need to update the top and right properties though so it's back in the right place you wanted again.