Set panel to go under image < 768px

Multi tool use
Multi tool useThe name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP


Set panel to go under image < 768px



I have an image with a panel inside that contains contact information of the company. Those two elements are looking horrible on viewport < 768 px. Is it possible to push the panel under the image on viewport < 768 px? I tried to set a push-right with the Bootstrap class, but does not seem to do anything like I want.


< 768 px


< 768 px


push-right



Demosite of the contactpage made in Bootstrap 3.



I tried to delete all the code there is not relevant for the question:




/* Track and trace */
.bs-calltoaction{
position: relative;
width:auto;
padding: 15px 25px;
border: 1px solid black;
margin-top: 10px;
margin-bottom: 10px;
border-radius: 5px;
}

.bs-calltoaction > .row{
display:table;
width: calc(100% + 30px);
}

.bs-calltoaction > .row > [class^="col-"],
.bs-calltoaction > .row > [class*=" col-"]{
float:none;
display:table-cell;
vertical-align:middle;
}

.cta-contents{
padding-top: 10px;
padding-bottom: 10px;
}

.cta-title{
margin: 0 auto 15px;
padding: 0;
}

.cta-desc{
padding: 0;
}

.cta-desc p:last-child{
margin-bottom: 0;
}

.cta-button{
padding-top: 10px;
padding-bottom: 10px;
}

@media (max-width: 991px){
.bs-calltoaction > .row{
display:block;
width: auto;
}

.bs-calltoaction > .row > [class^="col-"],
.bs-calltoaction > .row > [class*=" col-"]{
float:none;
display:block;
vertical-align:middle;
position: relative;
}

.cta-contents{
text-align: center;
}
}


.bs-calltoaction.bs-calltoaction-info{
color: #fff;
background-color: #5bc0de;
border-color: #46b8da;
}


.bs-calltoaction.bs-calltoaction-info .cta-button .btn {
border-color:#fff;
}

.abc {
position: relative;
}
.def {
position: absolute;
top: 10px;
right: 20px;
max-width: 300px;
}

@media screen and (max-width: 480px) {
.def {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 480px;
width: 95%;
height: 85%;
}
.panel.panel-default .panel-heading {
padding: 5px 15px;
}
.panel.panel-default .panel-body {
padding: 5px;
}
img.img-responsive {
height: 200px;
}

}

/* Grid css */
p.bottom-column-color {
font-size: 0.82em;
color: green;
}

.index-content a:hover {
color: black;
text-decoration: none;
}
.index-content .row {
margin-top: 20px;
}
.index-content a {
color: black;
}
.index-content .card {
background-color: #FFFFFF;
padding: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.index-content .card:hover {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
color: black;
}
.index-content .card img {
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.index-content .card h4 {
margin: 20px;
}
.index-content .card p {
margin: 20px;
opacity: 0.65;
}
.index-content .cta {
width: 235px;
-webkit-transition: background-color 1s, color 1s;
/* For Safari 3.1 to 6.0 */
transition: background-color 0.5s, color 0.5s;
min-height: 20px;
background-color: #4CAF50;
color: #ffffff;
border-radius: 4px;
text-align: center;
font-weight: lighter;
margin: 0px 20px 15px 20px;
padding: 5px 0px;
display: inline-block;
}
.index-content .cta:hover {
background-color: #dadada;
color: #002E5B;
}
/* Set width between block elements */
.small-padding.top {
padding-top:10px;
}

.small-padding.bottom {
padding-bottom:10px;
}
.small-padding.left {
padding-left:5px;
}

.small-padding.right {
padding-right:5px;
}

.row [class*="col-"] {
padding-left: 5px;
padding-right: 5px;
}

.margin_bottom {
margin-bottom: 10px;
}
.row [class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
.row {
margin-left: -5px;
margin-right: -5px;
}
.card-img-bottom {
color: #fff;
height: 20rem;
background: url(images/img1.jpg) center no-repeat;
background-size: cover;
}
.img-responsive {
height: 100%;
}

/* Set full width on columns */
@media (max-width: 768px) {
.img-responsive {
width: 100%;
}
.index-content .card img {
height: 100%
}
}

@media (max-width: 991px) {
h3 {
font-size: 1.2em;

}
}

/* GRID ELEMENTS MEDIA QUERIES */
@media (min-width: 768px) {
.card {
position: relative;
}
.card-content {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.5);
}
.card-content h4,
.card-content p {
color: white;
width: 100%;
float: left;
margin: 0 0 5px;
}
.card-content a {
float: right;
}
.index-content .card h4,
.index-content .card p {
padding: 15px 20px;
margin: 0;
}
.index-content .card p {
padding: 0 20px 15px;
margin: 0;
}
.card-content-textbox {
position: absolute;
top: 0;
left: 0;
background: rgba(255, 255, 255, 0.7);
/*right: 0;*//* top position on right*/
margin: 15px;
max-width: 300px;
height: 91%
}
}


<!DOCTYPE html>
<html lang="en">
<head>
<title>Kontakt Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<!-- TrustBox script -->
<script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
<!-- End Trustbox script -->
</head>
<body>

<div class="container">
<div class="row">
<!-- Picture Column -->
<div class="col-sm-12">
<div class="abc">
<img src="http://koed.dk/Static/Cms/05ac4ebf-d478-49a7-8567-03257ece223b.jpg" class="img-responsive" />
<div class="def" style="width:400px;">
<div class="panel panel-default">
<div class="panel-heading"><h4>CompanyName A/S</h4></div>
<div class="panel-body">
<p><a href="#" target="_blank">Nyhåbsvej 16 - 18</a><br/>
8560 Kolind
</p>
<hr/>
<i class="fas fa-phone fa-2x"></i><a href="tel:+4586392900" style="padding-left:10px;font-size: 15px;">+ 45 86 39 29 00</a><br/><br/>
<i class="far fa-envelope fa-2x"></i><a href="mailto:info@CompanyName.dk" style="padding-left:10px;font-size: 15px;">info@CompanyName.dk</a>
<hr/>
<h5>Åbningstider</h5>
<p>Mandag - Torsdag: 8.00 - 16.00</p>
<p>Fredag: 8.00 - 15.00</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>




1 Answer
1



Sure, try this code:


@media (max-width: 768px) {
.img-responsive {
width: 100%;
}
.index-content .card img {
height: 100%
}
.def {
position: relative;
top: auto;
right: auto;
}
}






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

zKF PeDwqItpP7p1Gh6aRUnIaI,QeqVdTdNI,2YVyU8tPKwj,q3S0W3P6,k7m21xm,a,wMJGU Ip7lCxP,8kP1 FJLOSb I5r7GQ
-
B,71hyGFxElxcB,uX,xmff PJx 9eL rxlzF

Popular posts from this blog

Makefile test if variable is not empty

Makefile test if variable is not empty In a makefile I'm trying to I've created this simplified makefile to demonstrate my problem. Neither make a or make b executes the body of the if, I don't understand why not. make a make b .PHONY: a b a: $(eval MY_VAR = $(shell echo whatever)) @echo MY_VAR is $(MY_VAR) $(info $(MY_VAR)) ifneq ($(strip $(MY_VAR)),) @echo "should be executed" endif @echo done b: $(eval MY_VAR = $(shell echo '')) @echo MY_VAR is $(MY_VAR) $(info $(MY_VAR)) ifneq ($(strip $(MY_VAR)),) @echo "should not be executed" endif @echo done I'm using $ make --version GNU Make 3.81 There are several problems, and misunderstandings. Your MY_VAR is a make variable, set it without a <tab> to its value, and no need to $(eval ...) . MY_VAR:=$(shell echo whatever) is enough. No <tab> before $(info ...) neither, this is make – Zelnes ...
Read more

Will Oldham

Image
"Palace Music" redirects here. For the racehorse, see Palace Music (horse). Bonnie 'Prince' Billy Will Oldham, June 6, 2009 Background information Birth name William Oldham Also known as Palace Brothers Palace Music Bonnie 'Prince' Billy Born ( 1970-12-24 ) December 24, 1970 (age 47) Louisville, Kentucky, United States Genres Folk alternative country country freak folk [1] Years active 1993–present Labels Drag City, Domino, Spunk Associated acts Dawn McCarthy, The Cairo Gang, Mekons, Matt Sweeney, Mick Turner, Tortoise, Trembling Bells, Harem Scarem, The Picket Line, Alex Neilson, Björk, Slint Website www.bonnieprincebilly.com Will Oldham (born December 24, 1970), better known by the stage name Bonnie 'Prince' Billy , is an American singer-songwriter and actor. From 1993 to 1997, he performed and recorded under variations of the Palace name, including the Palace Brothers, Palace Songs, and Palace Music. After releasing material under his own name,...
Read more

Visual Studio Code: How to configure includePath for better IntelliSense results

Image
Clash Royale CLAN TAG #URR8PPP Visual Studio Code: How to configure includePath for better IntelliSense results so I am a complete beginner to using Visual Studio Code and I have no clue what I am doing. I've searched around (maybe not enough), but I cant find just a simple explanation for someone like me on how to configure the c_cpp_properties.json file that I am redirected to whenever I click on the yellow lightbulb next to a line that is underlined with a green squiggle. Lightbulb example c_cpp_properties.json I just want to know what to put in the .json to make IntelliSense work properly This question has answers that may be good or bad; the system has marked it active so that they can be reviewed. 2 Answers 2 From: https://code.visualstudio.com/docs/languages/cpp Below you can see that the MinGW C++ include path has been added to browse.path for Windows: { "name": "Win32...
Read more