I have been searching for an answer to what I feel is a fairly basic question, but I can not figure out what is wrong about code. I have a project using the bootstrap library with php and the goal is to fit all the content on the page within the viewport, and I was hoping someone could help me about the solution or any advice on what I am doing wrong. The code included is the gallery section and while it compresses horizontally I also need it to compress vertically.
HTML:
<div class="wrapper">
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 gallery">
<a target="_blank" href="img_fjords.jpg">
<img src="images/test1.jpg">
</a>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 gallery">
<a target="_blank" href="img_forest.jpg">
<img src="images/test1.jpg">
</a>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 gallery">
<a target="_blank" href="img_lights.jpg">
<img src="images/test1.jpg">
</a>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-4 gallery">
<a target="_blank" href="img_mountains.jpg">
<img src="images/test1.jpg">
</a>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 gallery">
<a target="_blank" href="img_mountains.jpg">
<img src="images/test1.jpg">
</a>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 gallery">
<a target="_blank" href="img_mountains.jpg">
<img src="images/test1.jpg">
</a>
</div>
</div>
</div>
CSS:
<head>
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- personal CSS -->
<style>
.wrapper{
height: 100vh;
width: 100vw;
}
.gallery {
background-color: #000000;
padding: 0;
margin: 0;
}
.gallery:hover {
z-index: 2;
}
.gallery img:hover {
-webkit-box-shadow: 0px 0px 48px 22px rgba(222,222,222,1);
-moz-box-shadow: 0px 0px 48px 22px rgba(222,222,222,1);
box-shadow: 0px 0px 48px 22px rgba(222,222,222,1);
transform: scale(1.1,1.1);
-moz-transform: scale(1.1,1.1);
-webkit-transform: scale(1.2,1.1);
-o-transform: scale(1.1,1.1);
-ms-transform: scale(1.1,1.1);
opacity: 1;
}
.gallery img {
margin: 0;
padding: 0;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
width: 100%;
height: 100%;
opacity: .5;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
Can you post a MCVE example on Fiddle or Codepen?
With what you have provided, I've come up with this Fiddle:
https://jsfiddle.net/sebdum/wctffuh3/1/
It's pretty simple:
*,
*:before,
*:after {
box-sizing: border-box;
}
.wrapper {
width: 100%;
height: 100wh;
}
.div {
background: red;
float: left;
border: 1px solid black;
width: 25%;
height: 33vh;
}
But you need to be aware of smaller devices such as iPhone 5 which has effective vertical resolution of 568px, which would make each div rather small. Also somewhat obviously, this works only with known number of elements, as dynamic implementation looks for a more complex solution, possibly involving JS.
Related
I'm trying to display the Instagram feed on a website, but the column breakpoint is not working.
When in a small device all the columns on the other sections stacks like they are supposed to, but for this part the feed part it is no stacking. They still side by side even in a small screen device.
I didn't do any customization for the bootstrap.
The custom css for the images is listed below.
I'm suspecting that my css is interfering with it somehow, but i didn't find a solution. Can you help me?
<div class="container">
<div class="row" id="instagram-feed">
{loop="$feed"}
<div class="col-md-4 col-sm-12 instagram-image">
<a
href="{$value.permalink}"
target="_blank"
style="background-image: url('{$value.media_url}')"
></a>
</div>
{/loop}
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 gallery-link" >
<p>
xpto
<a
href="https://www.instagram.com/xpto/"
target="_blank"
rel="noopener noreferrer"
>instagram</a
>
</p>
</div>
</div>
</div>
i'm using rain/tpl to loop the values.
Rendered result:
<div class="col-md-4 col-sm-12 instagram-image">
<a
href="https://www.instagram.com/p/Ce3K0vtqwWg/"
target="_blank"
rel="noopener"
style="
background-image: url('https://scontent-frx5-1.cdninstagram.com/v/t51.2885-15/288042510_360927436108874_1443195410220397807_n.jpg?_nc_cat=106&ccb=1-7&_nc_sid=8ae9d6&_nc_ohc=BcBzX46rui8AX9LhNfW&_nc_ht=scontent-frx5-1.cdninstagram.com&edm=ANQ71j8EAAAA&oh=00_AT-UQWOTJQXMvRivbpb7IAutNaT6D2_1ws1WdzhSNMARWA&oe=62B4FE5D');"
>
</a>
</div>
The css i added for this part:
.instagram-image a:before {
content: "";
display: flex;
font-family: "Font Awesome 5 Brands";
font-size: 50px;
color: var(--primary);
background-color: #73a2a9;
opacity: 0;
text-align: center;
transition: all 0.5s;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
.instagram-image a:hover:before {
opacity: 0.5;
}
#instagram-feed {
width: 100%;
float: left;
display: flex;
justify-content: space-around;
}
I am using bootstrap 4 inside my wordpress theme. I am trying to make a slide show on the top of my page but the images are stretching out when the size is not 100%.
How do I make the images zoom instead of stretching. I have tried applying
.cover {
background-position: center center !important;
background-repeat: no-repeat !important;
background-attachment: fixed !important;
background-size: cover;
}
class to my tag.
This is the code for where I want to add the image.
<div class="carousel-inner">
<div class="carousel-item active">
<img class='cover' src="<?php echo get_theme_file_uri('/incl/1.jpg');?>">
<div class="carousel-caption">
<h3>Voorbeeld 1</h3>
<p>Voorbeeld beskrywing</p>
</div>
</div>
<div class="carousel-item">
<img class='cover' src="<?php echo get_theme_file_uri('/incl/2.jpg');?>" >
<div class="carousel-caption">
<h3>Voorbeeld 2</h3>
<p>Voorbeeld beskrywing</p>
</div>
</div>
<div class="carousel-item">
<img class='cover' src="<?php echo get_theme_file_uri('/incl/3.jpg');?>">
<div class="carousel-caption">
<h3>Voorbeeld 3</h3>
<p>Voorbeeld beskrywing.</p>
</div>
</div>
</div>
You're expecting image source (src) to be treated as background-image.
Might be !important to you, but it won't happen.
You probably want to show the image as background of parent (I moved cover class on parent):
.cover {
background: transparent no-repeat fixed center /cover;
}
.cover img {
opacity: 0;
display: block;
width: 100%;
height: auto;
}
<div class="cover" style="background-image: url(https://loremflickr.com/620/240)">
<img src="https://loremflickr.com/620/240">
<div class="caption">
<h1>Caption stuff here...</h1>
</div>
</div>
.cover {
background: transparent no-repeat fixed center /cover;
}
.cover img {
opacity: 0;
display: block;
width: 100%;
height: auto;
}
/* You don't need anything below this point. Just for SO example */
body {
margin: 0;
}
.cover {
position: relative;
}
.cover .caption{
width: calc(100% - 60px);
height: calc(100% - 60px);
left: 30px;
top: 30px;
background-color: #42424242;
color: white;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
border: 1px solid #ffffff35;
box-shadow: 0 5px 6px -3px rgba(0,0,0,.1), 0 9px 12px 1px rgba(0,0,0,.07), 0 3px 16px 2px rgba(0,0,0,.06)
}
<div class="cover" style="background-image: url(https://loremflickr.com/620/240)">
<img src="https://loremflickr.com/620/240">
<div class="caption">
<h1>Caption stuff here...</h1>
</div>
</div>
This lets the <img> still set the height of the slide but won't show it, so the background can be viewed. Obviously, you need to do it for each of the items.
I'm currently building a site on Wordpress using the html5blank as the parent theme. I've built all the front-end text pages on HTMl/CSS. When I've transferred all the files over a lot of the styling has broken - I've fixed the majority of it but there's one section that I cannot fix. This is how it should look -
And this is how it looks in the Wordpress site -
When I've inspected the site via developer tools it seems as though these rules are not being applied -
.agencyproducts {
position: relative;
display: inline-block;
text-align: center;
}
Also, the row in the front-end site is applying a height rule but not in the wordpress site. I've looked at applying specificity rules and !important but nothing (this also disrupts other styling rules on other parts of the site). I'm really stuck on this and would appreciate any assistance.
Here's the full code for the section -
section#products {
height: 800px;
max-width: 100%
}
.agencyproducts {
position: relative;
display: inline-block;
text-align: center;
}
.agencyproducts p {
text-align: center;
margin: 30px;
}
.agencyproducts img {
width: 70px;
height: 70px;
position: relative;
line-height: 1;
top: 50%;
}
figure {
text-align: center;
display: inline-block;
max-width: 80px;
height: 100px;
vertical-align: top;
margin: 5px;
font-size: 9px;
margin-bottom: 60px;
}
figure img {
padding-bottom: 5px;
}
.four {
padding: 0;
margin: 0;
border: 0;
}
.images {
margin-top: 30px;
border-bottom: 10px;
}
.images img {
margin-left: 20px;
padding: 10px;
}
.chevron {
height: 150px;
}
.chevron figcaption {
margin-top: 20px;
font-size: 13px;
color: #d3d3d3;
}
hr.hragency {
display: block;
width: 250px;
margin-top: 0em;
margin-bottom: 0em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
border-color: #F0F0F0;
}
<section id="products">
<div class="container">
<div class="row">
<div class="twelve columns agencyproducts">
<p>WHAT PRODUCT ARE YOU INTERESTED IN?</p>
<a href="2k4kproduction.html">
<figure>
<img src="images/production.png" alt="Production">
<figcaption>2K / 4K PRODUCTION</figcaption>
</figure>
</a>
<a href="postproduction.html">
<figure>
<img src="images/post-production.png" alt="Post-Production">
<figcaption>POST PRODUCTION</figcaption>
</figure>
</a>
<a href="2d3danimation.html">
<figure>
<img src="images/animation.png" alt="Animation">
<figcaption>2D / 3D ANIMATION</figcaption>
</figure>
</a>
<a href="adhoc.html"><figure>
<img src="images/ADHOC.png" alt="ADHOC">
<figcaption>ADHOC</figcaption>
</figure>
</a>
<a href="interactive.html">
<figure>
<img src="images/interactive.png" alt="Interactive">
<figcaption>INTERACTIVE & PERSONALISED</figcaption>
</figure>
</a>
<a href="tvadverts.html">
<figure>
<img src="images/tv-adverts.png" alt="TV ADVERTS">
<figcaption>TV ADVERTS</figcaption>
</figure>
</a>
<a href="360video.html"><figure>
<img src="images/360.png" alt="360 Video and VR">
<figcaption>360 VIDEO & VIRTUAL REALITY</figcaption>
</figure>
</a>
</div>
</div>
<hr class="hragency">
<div class="row">
<div class="images">
<div class="four columns">
<img src="images/VIDEO.jpg" alt="Video">
<img src="images/blog.jpg" alt="blog">
</div>
<div class="four columns">
<img src="images/faq.jpg" alt="FAQ">
<img src="images/VIDEO.jpg" alt="Video">
</div>
<div class="four columns">
<img src="images/blog.jpg" alt="blog">
<img src="images/faq.jpg" alt="FAQ">
</div>
</div>
</div>
</div>
</section>
<section class="chevron">
<div class="container">
<div class="row">
<figure>
<figcaption>SEE MORE</figcaption>
<i class="fa fa-chevron-circle-down fa-3x" aria-hidden="true"></i>
</figure>
</div>
</div>
</section>
Try this:
.agencyproducts{
width:100%;
text-align:center;
}
.agencyproducts a{
display:inline-block;
}
Because container .agencyproducts need to have text-align:center and first childs of it must be displayed as inline-block ... then they will display properly. You only set child of a tag as display:inline-block but do not tell CSS how it should treat it parent.
With what I understood try appending !important to your custom css properties so as to override any pre-existing style properties.
height: 150px !important;
This is my HTML code
<div>
<div class="text-center col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="col-md-3 col-sm-3 animate-box">
<div class="team-section-grid" style="background-image: url(assets/img/image-bg.jpg);">
<div class="overlay-section">
<div class="desc">
<i class="icon icon-wallet2"></i> Buy Now
</div>
</div>
</div>
<div class="text-center add-cart">
<a href="" title="">
<i class="icon icon-cart"></i> Add To Cart
</a>
<a href="" title="">
<i class="icon icon-heart" style="margin-left: 10px;"></i> Add To Wishlist
</a>
</div>
</div>
View More..
</div>
What i am trying to achieve through JQUery is whenever click the view more.. or whenever the focus is on that button I want the following div appended to the current div so that I can dynamically load products from the DB and append it.
Can anyone help me with that code? Thanks in advance..
Did you tried: http://api.jquery.com/append/ ?
A very simple example:
jQuery('.wrapper a').on('click', function(e){
e.preventDefault;
jQuery('.wrapper').append('<div class="item"></div>');
});
.wrapper{
position: relative;
background: #e6e6e6;
padding: 10px 10px 50px 10px;
}
.wrapper a{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 10px 0;
background: #aaa;
color: white;
text-align: center;
border-top: 3px solid #fff;
}
.item{
display: block;
width: 100%;
height: 20px;
background: #ccc;
margin: 0 0 5px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
show more
<div class="item"></div>
</div>
Instead of append('<div class="item"></div>') you can append html-templates, too. It could be more comfortable to use a template engine here ...
I need to center some floated divs inside a container. The code I'm using works but I need the last row of floated elements to be aligned to the left and not centered. It's a photo album and all the thumbnails are automatically generated by a gallery script.
This is what the code produces
This is what I need
I don't think this is possible with css alone, maybe some jquery or php...
CSS
#gallery {
background-color: #ffffff;
border: 1px solid #999999;
margin: 0 auto;
overflow: hidden;
position: relative;
text-align: center;
width: 750px;
}
.image {*display:inline;
background: #F7F9FD;
border: 1px solid #E7F0F5;
display: -moz-inline-stack;
display: inline-block;
line-height: 100%;
margin: 1em;
padding: 0;
text-align:left;vertical-align:top;
zoom:1;
}
.imagethumb a, .imagethumb a:hover {
border:0;
display: block;
margin: 5px;
}
.imagethumb {float: left;}
.clear {clear: both}
The PHP code
<div id="gallery">
<?php while (next_image(false, $firstPageImages)): ?>
<div class="image">
<div class="imagethumb">
<?php printImageThumb(getAnnotatedImageTitle()); ?>
</div>
</div>
<?php endwhile; ?>
</div>
Generated html
<div id="gallery">
<div id="images">
<div class="image">
<div class="imagethumb"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></div>
</div>
<div class="image">
<div class="imagethumb"><img src="/zen/cache/p101-02_110_thumb.jpg" alt="p101-02" /></div>
</div>
<div class="image">
<div class="imagethumb"><img src="/zen/cache/p101-04_110_thumb.jpg" alt="p101-04" /></div>
</div>
[...]
</div>
Not sure what you are doing with all those nast hacks.. no jquery or php needed. just css.
This works fine for me. I did add widths and heights on the images because I didn't feel like actually getting an image. buts its all the same.
CSS
#gallery { background-color: #fff; border: 1px solid #999; margin: 0 auto; overflow: hidden; position: relative; text-align: center; width: 750px; }
.imagethumb a,
.imagethumb a:hover { border:0; display: block; margin: 5px; }
.imagethumb {float: left; margin:5px; background: #F7F9FD; border: 1px solid #E7F0F5; width:100px; height:200px;}
.clear {clear: both}
HTML Final Output
<div id="gallery">
<div id="images">
<div class="imagethumb"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></div>
<div class="imagethumb"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></div>
<div class="imagethumb"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></div>
<div class="imagethumb"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></div>
<div class="imagethumb"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></div>
<div class="imagethumb"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></div>
<div class="imagethumb"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></div>
<div class="imagethumb"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></div>
<div class="imagethumb"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></div>
<div class="imagethumb"><img src="/zen/cache/p101-01_110_thumb.jpg" alt="p101-01" /></div>
</div>
<div class="clear"></div>
</div>
You could just align left the whole thing with a left-padding and achieve the same result.
Or, you could align left everything and place it in another div container that is centered.