I found a good contact page that I want reproduce, see this link at Contatti section.
I'm using Initializr with Twitter Bootstrap3.
Here is HTML/css/js structure for Contact Section, I've a gmaps iframe (id="map") inside iframeWrapper placed with position:relative, iframeBlock is a full width/height panel with opacity = 0.7 to overshadow iframe, iframeCont with two panel with some contact link and btn-map and btn-cont to switch between active (no opacity and possibility to make the scroll and to use zoom buttons ) and inactive iframe.
I set position:absolute for all other element inside a iframeWrapper.
$('#btn-map').click(function(){
$('#iframeBlock').hide();
$('#iframeCont').hide();
$('#btn-map').css('display','none');
$('#btn-cont').css('display','block');
});
$('#btn-cont').click(function(){
$('#iframeBlock').show();
$('#iframeCont').show();
$('#btn-map').css('display','block');
$('#btn-cont').css('display','none');
});
#cont{
width: 100%;
height: 100%;
padding-top: 50px;
text-align: center;
background: #fff;
}
#map{
z-index:5;
width: 100%;
padding: 0;
}
#iframeWrapper{
position: relative;
}
#iframeBlock{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
opacity:0.7;
background: #000;
z-index: 6;
text-align:center;
}
#iframeCont{
position: absolute;
top:20%;
left: 0;
width: 100%;
height: 100%;
background: transparent;
z-index: 7;
text-align:center;
}
.cont-element{
background: #0b5394;
color:#FFF;
margin-bottom: 5%;
border-radius: 10px;
padding: 3%;
font-size: 1.2em;
}
#btn-map{
position: absolute;
top:70%;
left:25%;
z-index: 7;
opacity: 1;
background: #cc0000;
color: #FFF;
border-color: #FFF;
display:block;
}
#btn-cont{
position: absolute;
top:70%;
left:30%;
z-index: 7;
opacity: 0.7;
background: #FFF;
color: #000;
border-color: #cc0000;
display:none;
}
<!-- Contatti Section -->
<section id="cont" class="cont-section">
<div class="container-fluid">
<div class="row-fluid">
<div id="iframeWrapper">
<iframe id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2786.232975915266!2d8.878734115818997!3d45.70636282527264!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x478688abc9247355%3A0x59d85ca1774dc65a!2sASD+Pallacanestro+Lonate+Ceppino!5e0!3m2!1sit!2sit!4v1445187794194" frameborder="0" style="border:0" allowfullscreen></iframe>
<div id="iframeBlock">
</div>
<div id="iframeCont">
<div class="row">
<div class="col-xs-2">
</div>
<div class="col-xs-8 cont-element">
<i class="fa fa-mobile"></i> </br> <a href:"tel:xxxxxxxx">xxxxxxxx</a> <span>Giovanni</span>
</div>
<div class="col-xs-2">
</div>
</div>
<div class="row">
<div class="col-xs-2">
</div>
<div class="col-xs-8 cont-element">
<i class="fa fa-envelope"></i> </br> xxxxxxxx#gmail.com
</div>
<div class="col-xs-2">
</div>
</div>
</div>
<button id="btn-map" class="btn btn-info btn-lg"><i class="fa fa-map-o"></i> <strong>Visualizza Mappa</strong></button>
<button id="btn-cont" class="btn btn-info btn-lg"><i class="fa fa-phone"></i> <strong>Contattaci</strong></button>
</div>
</div>
</div>
<!-- begin snippet: js hide: false -->
Everything works but I have a padding of 15px around iframeWrapper due to container-fluid and then see two white borders on the left and right side.
I tried to reset the padding for the container-fluid to zero, but It displays a horizontal scroll bar and it is as if the content is outside the viewport.
Image that show contact section
Could you help me? Thanks
analyzing the code with Google Chrome Developers Tool, I found that two rows exceed viewport width. (For example, if viewport width is 380px, the row width is 410px), so I write this CSS rule:
#iframeCont .row{
width: 100%;
}
which refers just to the two rows, and now I have no more white space around my iframe.
But for me is a bad solution! I probably poorly designed html structure!
Related
I am using a card and after the card I put my footer. But the footer is of very large size as compared to the one mentioned in its css.
Image -
Code -
app.component.html -
<div class="card" id="card-css">
<div class="card-body">
//code
</div>
</div>
<hr class="line" color="#f5821f;" />
<div class="footer text-right" style = "height:50px !important" >
<label style="color: black">© 2018 ICICI. API Developer</label>
</div>
app.component.css
html, body {
height: 100%;
}
.footer {
position: relative;
left: 0;
bottom: 0;
width: 100%;
background-color: white;
color: black;
text-align: center; /* .push must be the same height as .footer */
}
If I am getting the question correctly then I think you want your footer at bottom of the page. For this you just need to change your bellow css.
position: relative
to
position: fixed;
margin:10px;
and for text size you can add the below css if you want.
font-size: 25px;
I'm trying to create an animation, which moves text up and shows some content when hovered over a card. When hovered over the card, the animation works as expected but when the cursor is placed on top of the text, there's this weird glitch and the text keeps moving up and down.
I've put this up on : https://codepen.io/anon/pen/qGwpaG
My code
HTML
<section class="section" id="black">
<div class="container">
<p class="display-4 d-flex justify-content-center spacing text-center light bold mt-3" id="case-head"> Make something you love.</p>
</div>
<div class="container">
<div class="row no-gutters">
<div class="col-lg-4">
<a href="blog.html" class="hover">
<div class="image">
<img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" class="">
</div>
<p class="img-text color bold">Sample - 1</p>
<p class="img-description light">Lorem Ipsum </p>
<i class="fas fa-long-arrow-alt-right img-description arrow"></i>
</a>
</div>
</section>
CSS
.img-text {
padding: 10px;
position: absolute;
bottom: 0px;
left: 16px;
font-size: 30px;
}
.img-description{
position: absolute;
padding: 10px;
bottom: 35px;
left: 16px;
font-size: 20px;
color: white;
}
.image {
position:relative;
width: 100%;
height: auto;
}
.image img {
width:100%;
vertical-align:top;
}
.image:after {
content:'\A';
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.8);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:hover:after {
opacity:1;
}
.color
{
color: white!important;
}
JS
$('.img-description').hide();
$(".hover").mouseover(function() {
$(this).find(".img-text").animate({ bottom: 100 },100);
$(this).find('.img-description').show();
})
$(".hover").mouseout(function() {
$(this).find(".img-text").animate({ bottom: 8 });
$(this).find('.img-description').hide();
})
You need to make sure that only the parent element is triggering the events. When using mouseover/mouseout, any child element will also trigger these events, which you don't want.
To fix this, you can either use mouseenter/mouseleave or, even better, use the hover shorthand:
$(".hover").hover(
function() {
$(this).find(".img-text").animate({ bottom: 100 }, 100);
$(this).find(".img-description").show();
},
function() {
$(this).find(".img-text").animate({ bottom: 8 });
$(this).find(".img-description").hide();
}
);
https://codepen.io/anon/pen/mYgxWv
I'm a really basic coder, so please bear with me if my question sounds silly. I'm using Bootstrap 3 to make some sort of a gallery page, so there are category filters on top, and rows of images that are responsive (3 horizontally on desktop, 2 on tablet, and 1 on mobile). So I'm currently using a lightbox plugin such that when the user clicks on the thumbnail, it will show a lightbox. So here's the code in HTML:
<div class="container">
<div class="row">
<div align="center" class="filter-categories">
<button class="btn btn-default filter-button" data-filter="all">all</button>
<button class="btn btn-default filter-button" data-filter="fine-art">fine art</button>
<button class="btn btn-default filter-button" data-filter="actor-portraits">portraits</button>
<button class="btn btn-default filter-button" data-filter="landscape">landscape</button>
<button class="btn btn-default filter-button" data-filter="street">street</button>
</div>
</div>
<br/>
<div class="row" align="center">
<!-- fine art-->
<div class="gallery_product filter fine-art col-md-4 col-sm-6 col-xs-12">
<a href="images/fine art photography/image-1.jpg" data-lightbox="gallery" data-image-alt="Image 1"> <img src="images/fine art photography/image-1.jpg" alt="Alt Text" class="gallery-image" />
<div class="overlay">
<div class="text">Hello World</div>
</div>
</a> </div>
...
so that when <!-- fine art--> is clicked, it shows up as a lightbox, and arrows will appear to navigate to the next image. For overlay, on hover over the image thumbnail, a black box with text is supposed to show up, but it takes on an extra 15px on the left and right from col-md-4 col-sm-6 col-xs-12, for some weird reason. below is the CSS for the section
/*hover effect*/
/*.gallery_product.col-md-4.col-sm-6.col-xs-12{
padding: 0 !important;
}*/
.gallery_product {
position: relative;
top:0;
left: 0;
}
.gallery-image {
display: block;
width: 100%;
height: auto;
}
.gallery_product {
margin-bottom: 30px;}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #121212;
}
.gallery_product:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
the padding: 0 !important, will simply just remove the spaces between the tiles. I still want to keep the spaces between the tiles, but keep the overlay WITHIN the tiles. I tried this:
<!-- fine art-->
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="gallery_product filter fine-art">
<a href="images/fine art photography/image-1.jpg" data-lightbox="gallery" data-image-alt="Image 1"> <img src="images/fine art photography/image-1.jpg" alt="Alt Text" class="gallery-image" />
<div class="overlay">
<div class="text">Hello World</div>
</div>
</a> </div></div>
and it gives me what I want, but then my data-lightbox will not work, the next and previous button becomes disabled. So essentially, I want the first code, but remove the extra sides of the overlay div. Is anyone able to help? Thank you so much!!
This is the shortest solution.
Change this:
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #121212;
}
to this:
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 15px;
right: 15px;
/* height: 100% */;
/* width: 100% */;
opacity: 0;
transition: .5s ease;
background-color: #121212;
}
I have some issues with a website of my business.
So I bought a theme for my website(Wordpress) and downloaded few extension to that, because it was included to the theme. Unfortunately I saw some issue, when I zoom out by my browser Chrome/Firefox, the right picture "Teilen" displace to the next line, and I want to force it to stay as it is by original one.
And here is the code:
.products li.product.grid.with-hover .product-actions {
top: 5px;
left: 19px;
right: 19px;
padding-top: 13px;
text-align: center;
position: absolute;
border-top: 0;
}
<div class="product-actions">
<a class="out-of-stock" title="Vergriffen">Vergriffen</a> Quick View <div class="buttons buttons_3 group">
Details
<div class="yith-wcwl-add-to-wishlist add-to-wishlist-2150">
<div class="yith-wcwl-add-button hide" style="display: none;">
<a href="/?add_to_wishlist=2150" rel="nofollow" data-product-id="2150" data-product-type="simple" class="add_to_wishlist" style="zoom: 1;">
Wunschliste<div class="blockUI" style="display:none"></div><div class="blockUI blockOverlay" style="z-index: 1000; border: none; margin: 0px; padding: 0px; width: 100%; height: 100%; top: 0px; left: 0px; opacity: 0.6; cursor: none; position: absolute; background: url("http://lockpick.ch/wp-content/themes/bazar/theme/assets/images/ajax-loader.gif") center center no-repeat rgb(255, 255, 255);"></div><div class="blockUI blockMsg blockElement" style="z-index: 1011; display: none; position: absolute; left: 32px; top: 25px;"></div></a>
<img src="http://lockpick.ch/wp-admin/images/wpspin_light.gif" class="ajax-loading" alt="loading" width="16" height="16" style="visibility: hidden;">
</div>
<div class="yith-wcwl-wishlistaddedbrowse show" style="display: block;">
<span class="feedback">Produkt hinzugefügt!</span>
<a href="http://lockpick.ch/wishlist/view/">
Wunschliste ansehen </a>
</div>
<div class="yith-wcwl-wishlistexistsbrowse hide" style="display:none">
<span class="feedback">Dieses Produkt ist bereits in der Wunschliste vorhanden.</span>
<a href="http://lockpick.ch/wishlist/view/">
Wunschliste ansehen </a>
</div>
<div style="clear:both"></div>
<div class="yith-wcwl-wishlistaddresponse"></div>
</div>
<div class="clear"></div>
Teilen </div>
</div>
CSS issue
Website: www.lockpick.ch
Hope you can help me, because I am totaly newbie to CSS/HTML...
Greetings
Lucia
The issue comes from the use of a width of 33.3333% for these elements. While in most cases this approximation of 1/3 works, in some settings it ends up being problematic and the 3 elements end up being slightly more than 100% width.
A simple fix would be to edit this 33.3333% to 33%. Visually the users shouldn't see the 1% missing on the right and it solves your issue.
From the website link you provided, it is located in style.css line 675:
ul.products li.product.grid.with-hover .product-actions .buttons.buttons_3 > *,
.product-box .buttons.buttons_3 > * {
width: 33%;
}
Please try so :) Because by default the box-sizing is content-box which is meaning width and height properties (and min/max properties) includes only the content. Border, padding, or margin are not included.
These element has border-left: 1px solid #e0dfdf; and width: 33.333%. In the smaller screen, each element will has small width, e.g less than 100px lead to 1px border costs more than 1% of width. Then the last element is pushed down to next line.
ul.products li.product.grid.with-hover .product-actions .buttons a.details, .product-box .buttons a.details {
box-sizing: border-box;
}
I have a container div with an image overlayed on top of it.
I want to center this container div within a basic popin. I am sure it has something to do with the overlay approach I am using within the CSS, but I cannot figure it out. How can I center the container dev within the popin?
EDIT: There are several of these blocks placed in-line.
CSS and HTML are as follows:
.containerdiv { float: left; position: relative; }
.cornerimage { position: absolute; top: 0; left: 0; }
.popin{
background:#fff;
padding:15px;
box-shadow: 0 0 20px #999;
border-radius:2px;
}
#underlay1 {
width: 320px;
height: 320px;
position: relative;
}
#underlay2 {
width: 320px;
height: 320px;
position: relative;
}
<div class="row">
<div class="col-md-4 col-sm-6 popin">
<div class="containerdiv">
<div id="underlay1"></div>
<img class="cornerimage" border="0" src="http://lorempixel.com/320/320" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 popin">
<div class="containerdiv">
<div id="underlay2"></div>
<img class="cornerimage" border="0" src="http://lorempixel.com/320/320" alt="">
</div>
</div>
</div>
Underlay is receiving an image from an API. overlayimage.gif is another image being placed on top.
Just remove float: left; from .containerdiv and give text-align: center; to .popin will solve your issue.
You can center absolute div like following way:
left: 50%;
transform: translate(-50%, 0px);
http://jsfiddle.net/5z2k1b1r/
Edit:
use margin: 0 auto; for #underlay as per your expected output.
Check Fiddle