i'm finding it difficult to achieve this exact photo grid any ideas on how to go about it?
enter image description here
for clarification, i already had working prototype enter image description here which was done with flexbox but one wasnt fiting in well so i had to use position absolute which doesnt work well when displayed on other screen size.
Heres was my code
.container-ed {
padding: 0px 40px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 30px;
}
.pic-ed {
position: relative;
}
.pic-ar {
position: absolute;
right: 40px;
margin-top: 280px;
}
.pic-ad {
margin-top: 10px;
}
<div class="container-ed">
<img class="pic-ed" src="img/pic.svg" height="550" width="600">
<!-- <img class="x-ed" src="img/ex-ed.svg"> -->
<img class="pic-ad" src="img/Rectangle%20136.svg" height="250" width="300">
<img class="pic-ad" src="img/Rectangle%20136.svg" height="250" width="300">
<img class="pic-ad" src="img/Rectangle%20136.svg" height="250" width="300">
<img class="pic-ad" src="img/Rectangle%20136.svg" height="250" width="300">
<img class="pic-ar" src="img/Rectangle%20136.svg" height="250" width="300">
</div>
is this you are looking for?
.photo-grid {
width: 400px;
height: 400px;
}
.grid {
display: inline-block;
vertical-align: top;
float: left;
position: relative;
box-sizing: border-box;
border: 1px solid #aaa;
background-color: #eee;
}
.grid:before {
content: attr(data-label);
position: absolute;
top: 3px;
left: 3px;
font-weight: bold;
color: #fff;
text-shadow: 0px 0px 1px #000;
font-size: 2rem;
font-family: sans-serif;
}
.grid.small {
width: 33.3%;
height: 33.3%;
}
.grid.medium {
width: 66.6%;
height: 66.6%;
}
.grid.right {
float: right;
}
<div class="photo-grid">
<div class="grid medium" data-label="1"></div>
<div class="grid small" data-label="2"></div>
<div class="grid small" data-label="3"></div>
<div class="grid small right" data-label="4"></div>
<div class="grid small right" data-label="5"></div>
<div class="grid small right" data-label="6"></div>
</div>
I'm not sure how responsive you want this to be. I would make a div element for the first 3 pictures and another for the bottom 3. set the size of the first image to be a higher proportion than the others and float them left.
You could try using twitter bootstrap and appending different heights to the boxes. W3Schools has a tutorial on how to use it: https://www.w3schools.com/bootstrap/
Related
I can't get these 2 app badges (a hrefs) to align as display: inline-block at the same height next to each other horizontally.
I've tried just manually manipulating the margin-top on the second a href, but resizing window breaks it. I need this to be responsive. Here is html:
<div class="introwrap small-12 medium-10 large-8 small-centered columns">
<img src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=250x83&releaseDate=1617148800&h=118342e0e75ef2d882289fc4ee258bfb" alt="Download on the App Store" style="border-radius: 13px; width: 250px; height: 83px;">
<a href=''><img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png' style="margin-left: 0%; margin-top: -16.5%;display:inline-block;height:125px;overflow:hidden;" /></a>
</div>
Css is inline except for the container which is generated by wordpress. I know I need to wrap these a hrefs in a smaller container div. How can I align these a hrefs at same height inline?
One of the issues is that the images are not the same size. Google play image has transparent border around of it.
.badges
{
width: 100%;
text-align: center;
margin-bottom: 4%;
}
.badge1,
.badge2
{
display: inline-block;
overflow: hidden;
border-radius: 13px;
width: 250px;
height: 83px;
}
.badge2
{
margin-left: 0;
width: 300px;
}
.badge1 > img
{
border-radius: 13px;
height: 83px;
}
.badge2 > img
{
border-radius: 13px;
height: 123px;
position: relative;
top: -20px;
left: -10px;
}
<div class="introwrap small-12 medium-10 large-8 small-centered columns badges">
<img src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=250x83&releaseDate=1617148800&h=118342e0e75ef2d882289fc4ee258bfb" alt="Download on the App Store">
<img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png' />
</div>
img1
img2
When you click on the modal it opens the image like lightbox but the problem is that it's scrollable as well as images don't fit the screen. Here is the code:
HTML
<div class='row'>
<div class='col-md-3 img-content' *ngFor="let image of images let i = index">
<img (click)="openModal();currentSlide(i+1)" class="hover-shadow cursor img-responsive"
src="http://res.cloudinary.com/dfg5p1pww/image/upload/v{{image.imgVersion}}/{{image.imgId}}">
</div>
</div>
<div id="myModal" class="slide-modal">
<span class="close cursor" (click)="closeModal()">×</span>
<div class="slide-modal-content">
<div class="mySlides" *ngFor="let image of images let i = index">
<img class="img-responsive1" src="http://res.cloudinary.com/code/image/upload/v{{image.imgVersion}}/{{image.imgId}}" style="width:100%">
</div>
<a class="prev" (click)="plusSlides(-1)">❮</a>
<a class="next" (click)="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="slide-column" *ngFor="let image of images let i = index">
<img (click)="currentSlide(i+1)"
class="img-responsive" src="http://res.cloudinary.com/code/image/upload/v{{image.imgVersion}}/{{image.imgId}}" style="width:100%">
</div>
</div>
</div>
CSS
.slide-column {
float: left;
width: 25%;
}
.slide-modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 10px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
.slide-modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.mySlides {
display: none;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
.next
{
right: 0;
border-radius: 3px 0 0 3px;
color:#ffffff !important
}
.prev {
left: 0;
border-radius: 3px 0 0 3px;
color:#ffffff !important
}
img {
margin-bottom: -4px;
max-width:100%;
}
.img-responsive {
width: auto;
height: 250px;
}
.img-responsive1
{
height:100%;
width:auto;
vertical-align: top;
}
The problem is inside those classes slide-modal, slide-modal-content, img-responsive1
Also in the above images, you can see how does it look like? We use Bootstrap 4 in this project with Angular. How to fix the size of the modal and make it to fit the full screen and at the same time allow images to fit to the screen (without scrolling and if image is long then change the width for showing it correctly instead of changing just height in such a way as it's shown in the image)?
I would consider using Bootstrap's built-in CSS classes for responsiveness as opposed to rolling your own CSS selectors. Responsiveness, in Bootstrap, is based on screen width not height since Bootstrap utilizes width-based CSS Media Queries. This will solve the issue with the horizontal scroll for your images since images will automatically scale to their parent container's width. To make your images responsive in Bootstrap simply apply the .img-fluid class to them:
<img src="..." class="img-fluid" alt="Responsive image">
This .img-fluid class is a good default for your images moving forward so they never overflow your parent container's width.
Directly from Bootstrap's documentation:
"Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element."
Hopefully that helps!
Okay, so I thought that the grid was perfectly aligned to the center, only to realise that it was a few pixels out. I completely stripped all of my attempts at centering and looked online but couldn't find anything.
I know I can use CSS Grids, Flexbox etc. but I am trying to learn how to create websites without using any aid. So I can learn the reasoning behind things.
Fiddle:
https://jsfiddle.net/8L9ye7nj/5/
Grid HTML:
<div class="box-wrapper">
<div class="box-container">
<div class="box" id="stethoscope">
<div class="box-label">
<p>Book an appointment</p>
</div>
</div>
<div class="box" id="prescription">
<div class="box-label">
<p>Request a repeat prescription</p>
</div>
</div>
<div class="box" id="group">
<div class="box-label">
<p>Join the Patient Group</p>
</div>
</div>
</div>
</div>
Grid CSS:
.box {
float: left;
width: 25%;
height: 300px;
background-color: #252625;
color: #FFF;
position: relative;
padding: 15px;
margin: 0.5%;
}
.box-label {
position: absolute;
bottom: 0;
text-align: center;
background-color: rgba(0,0,0,0.5);
width: 100%;
padding: 7px 0;
left: 0;
}
.box-label:hover {
animation: box-stretch 1s forwards ease-in-out;
cursor: pointer;
}
.box-container {
width: 90%;
}
.box-container::after {
content: "";
clear: both;
display: table;
}
.box-wrapper {
background-color: #B21645;
padding: 30px;
}
How can you divide the box and center them?
You can use calc to use mathematical expressions to calculate height, widths etc in css. You can divide the width by three here for the box.
.box {
display: inline-block;
width: calc(100% / 3);
}
Things to consider
Mind the space between inline-block elements. You can read more about
that here.
Avoid using floats as much as possible. Most layouts done with float can be achieved with inline-block. Floats are simply meant to take an element, put it to one side, and let other content flow around it. That’s all.
box-wrapper and box-container either one is only needed to wrap the contents inside.
Code Snippet
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.box-wrapper {
background-color: #b21645;
padding: 20px;
}
.box {
position: relative;
display: inline-block;
width: calc(100% / 3);
padding: 0 10px;
height: 300px;
overflow: hidden;
}
.box img {
height: 100%;
width: 100%;
object-fit: cover;
object-position: left top;
}
.box-label {
position: absolute;
bottom: 0;
width: calc(100% - 20px);
text-align: center;
background-color: rgba(0, 0, 0, .6);
padding: 10px 0;
transition: padding 0.3s;
}
.box-label:hover {
padding: 25px 0;
}
.box-label p {
font-family: Helvetica;
color: white;
font-size: 20px;
}
<div class="box-wrapper">
<div class="box">
<img src="https://images.unsplash.com/photo-1509027572446-af8401acfdc3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ef8f839186c5a6055d2802005b575194&auto=format&fit=crop&w=500&q=60" alt="" />
<div class="box-label">
<p>Some Title Here</p>
</div>
</div><div class="box">
<img src="https://images.unsplash.com/photo-1509027572446-af8401acfdc3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ef8f839186c5a6055d2802005b575194&auto=format&fit=crop&w=500&q=60" alt="">
<div class="box-label">
<p>Some Title Here</p>
</div>
</div><div class="box">
<img src="https://images.unsplash.com/photo-1509027572446-af8401acfdc3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ef8f839186c5a6055d2802005b575194&auto=format&fit=crop&w=500&q=60" alt="">
<div class="box-label">
<p>Some Title Here</p>
</div>
</div>
</div>
I've got a problem with my text when the browser is shrunk or on a mobile device. Here is a screenshot to help explain. On a larger screen the 'matched' text is on the same line as 'what is' so there is no problem. Below is the code I'm using at the minute. I would like the gap to be the same as the one below 'matched'. Thanks in advance.
HTML
<div class="outer-wrapper">
<img class="aligncenter wp-image-1015"
src="https://www.thesurebettor.com/wp-content/uploads/2017/05/what-is-
matched-betting-1.jpg" alt="" width="750" height="431" />
<div class="text-wrapper"><p>What is matched</p><p>betting?</P>
</div>
</div>
CSS
.aligncenter {
display: block;
margin: auto;
max-width: 100%;
height: auto;
}
.outer-wrapper {
position: relative;
}
.text-wrapper {
position: absolute;
left: 50%;
top: 35px;
transform: translateX(-90%);
color: white;
font-size: 52px;
font-weight: bold;
}
You are using two paragraphs for the text, but semantically it is one paragraph:
<p>What is matched betting?</p>
This is also the root of your problem - you can solve it using two paragraphs by ensuring the line height and the margins/padding match - but using a single paragraph would be better.
Just add line-height: 1 on .text-wrapper div.
.aligncenter {
display: block;
margin: auto;
max-width: 100%;
height: auto;
}
.outer-wrapper {
position: relative;
}
.text-wrapper {
position: absolute;
left: 50%;
top: 35px;
transform: translateX(-90%);
color: white;
font-size: 52px;
font-weight: bold;
line-height:1;
}
<div class="outer-wrapper">
<img class="aligncenter wp-image-1015"
src="https://www.thesurebettor.com/wp-content/uploads/2017/05/what-is-
matched-betting-1.jpg" alt="" width="750" height="431" />
<div class="text-wrapper"><p>What is matched</p><p>betting?</p></div>
</div>
You written wrong html. please make it correct.
.aligncenter {
display: block;
margin: auto;
max-width: 100%;
height: auto;
}
.outer-wrapper {
position: relative;
}
.text-wrapper {
position: absolute;
left: 50%;
top: 35px;
transform: translateX(-90%);
color: white;
font-size: 52px;
font-weight: bold;
}
<div class="outer-wrapper">
<img class="aligncenter wp-image-1015"
src="https://www.thesurebettor.com/wp-content/uploads/2017/05/what-is-
matched-betting-1.jpg" alt="" width="750" height="431" />
<div class="text-wrapper"><p>What is matched</p><p>betting?</p></div>
</div>
Click here for the Snapshot
Your issue is not reproducible from my end, check the above snapshot.
It may be caused because of some other styling in your css. Anyhow
please make text responsive.
Please include font-size: 100% for the body and use media query to target the screen where the text is overlapping
eg.,
#media only screen and (min-width: 320px) and (max-width: 535px){
//give font-size in percentage for text-wrapper p and if required include line-height as well
}
I'm trying to get this text to go inside the picture. For some reason it doesn't work when I add it into WordPress. Seems to work fine in JS fiddle which I've attached below. Any help would be greatly appreciated.Screenshot of what's happening on WP
https://jsfiddle.net/tdh3euue/
<div class="outer-wrapper">
<img class="aligncenter wp-image-1015"
src="https://www.thesurebettor.com/wp-content/uploads/2017/05/what-is-
matched-betting-1.jpg" alt="" width="750" height="431" />
<div class="text-wrapper"><p>What is matched</p><p>betting?</p>
</div>
</div>
.outer-wrapper {
position: relative;
}
.text-wrapper {
position: absolute;
left: 35px;
top: 35px;
color: white;
font-size: 52px;
font-weight: bold;
}
From your image I think you have a center align to outer-wrapper that's why the text is shifted.
Here I used left: calc((100% - 750px)/2 + 35px); since your img are fixed to 750px width, I use that calc to set the correct left as 35px from the left edge of the img.
Also using #media (max-width: 750px) if the screen is less than 750px, which the calc will return a value less than 35px, we don't want that so, this media query will help you set the left to 35px if the screen is less than 750px wide.
.outer-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.text-wrapper {
position: absolute;
left: calc((100% - 750px)/2 + 35px);
top: 10px;
color: white;
font-size: 52px;
font-weight: bold;
}
#media (max-width: 750px) {
.text-wrapper {
left: 35px;
}
}
<div class="outer-wrapper">
<img class="aligncenter wp-image-1015" src="https://www.thesurebettor.com/wp-content/uploads/2017/05/what-is-matched-betting-1.jpg" alt="" width="750" height="431" />
<div class="text-wrapper">
<p>What is matched</p>
<p>betting?</p>
</div>
</div>