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>
Related
TL;DR
Please review my code and help me answer the questions I have. You can find the code at the end of the question.
I've been learning HTML/CSS from freeCodeCamp and at the end of their Responsive Web Design course there're a few projects to do.
So I've started with the tribute page project.
I had an idea to center 3 images on the page, the middle image overlapping the two on the sides. however that was not an easy task since I don't know much about HTML/CSS. I've spent hours trying different methods and figuring out whether they work. Such as float: left, position: absolute, display: inline-block.
I think I did my best using display: inline-block however I would like you to take a look at what I did and tell me how I can improve it or what other methods we could use to achieve the same thing, just to see different ways of doing the same thing.
Questions
I've got a few problems with the current one as well which I would like you to help me fix.
Since I am using margin-left: -5%; for .figRight and .figLeft when I zoom in or zoom out of the page the ratio of the two images on the sides being hidden behind image in the middle changes. How can I make it so that the ratio of the images on the sides getting under the middle image are always the same? Let's say I want 5% of the images on the sides to be always behind the image in the middle.
When you zoom out of the page the texts below the images collapse. That also happens when you zoom in. How to avoid that? Maybe wrapping the text? Please see the screenshot below.
What do you think about the media queries I wrote? How can I make them work better? For example if you just run the code snippet below in full page and zoom until you have around 300px width you can see that it doesn't work as expected with smaller viewports i.e. the image on the right is moved down.
Code
Here's my link to codepen.io.
Here's the code just in case:
#main {
height: 100%;
background-color: #eee;
padding: 10px;
}
#title {
text-align: center;
}
body {
margin: 0;
color: #333;
}
#img-div {
/* position: relative; */
background-color: white;
text-align: center;
padding: 15px;
}
figure {
/* float: left; */
display: inline-block;
position: relative;
max-width: 300px;
height: auto;
text-align: center;
margin: 0;
}
#media (max-width: 786px) {
figure {
max-width: 150px;
font-size: 12px;
}
}
#media (max-width: 650px) {
figure {
max-width: 100px;
font-size: 10px;
}
}
img {
max-width: inherit;
border: 5px solid white;
border-radius: 50%;
}
.figLeft {
margin-right: -5%;
/* position: absolute; */
/* left: 15%; */
/* top: 30px; */
/* margin: 0 auto; */
}
.figMid {
/* position: absolute; */
/* left: 0; */
/* right: 0; */
/* margin: auto; */
z-index: 1;
}
.figRight {
margin-left: -5%;
/* position: absolute; */
/* right: 15%; */
/* top: 30px; */
/* margin: 0 auto; */
}
<main id="main">
<h1 id="title">Albert Einstein</h1>
<div id="img-div">
<!-- Figure 1 -->
<figure id="image" class="figLeft">
<img src="https://imgix.ranker.com/user_node_img/50065/1001294480/original/smoked-cigarette-butts-he-picked-off-the-street-photo-u1?w=650&q=50&fm=pjpg&fit=crop&crop=faces" alt="Albert Einstein" class="img">
<figcaption id="img-caption">A photo of Albert Einstein
</figcaption>
</figure>
<!-- Figure 2 -->
<figure id="image" class="figMid">
<img src="https://memolition.com/wp-content/uploads/2014/01/albert-einstein-10.jpg" alt="Albert Einstein" class="img">
<figcaption id="img-caption">A photo of Albert Einstein
</figcaption>
</figure>
<!-- Figure 3 -->
<figure id="image" class="figRight">
<img src="https://www.quotationof.com/images/albert-einstein-2.jpg" alt="Albert Einstein" class="img">
<figcaption id="img-caption">A photo of Albert Einstein
</figcaption>
</figure>
<div style="clear: both"></div>
</div>
</main>
Answering to your questions:
1. How can I make it so that the ratio of the images on the sides getting under the middle image are always the same?
Do not use margin-left and margin-right to position the images. Instead, use transform. With the code below, your images will also be translated to the sides, but according to their own width. That way, if you zoom in or zoom out the page, they will stay at the same position. You can modify the percentage of translation as you want.
.figLeft {
transform: translateX(30%);
}
.figRight {
transform: translateX(-30%);
}
2. How to avoid the collapsing of the text below the images?
You can do that by limiting the width of figcaptions and centralizing them as the screen gets smaller:
#media (max-width: 960px) {
figure {
max-width: 150px;
font-size: 12px;
}
figcaption {
max-width: 70px;
margin: auto;
}
}
3. What do you think about the media queries I wrote? How can I make them work better?
The layout you should for the images in smaller screens is something you should decide. However, if you just want the images to have their width reduced as the screen size decreases, you can simply set a higher max-width specification for your first media query. That way, the image at the right will not move down anymore. The media queries would be this way:
#media (max-width: 960px) {
figure {
max-width: 150px;
font-size: 12px;
}
figcaption {
max-width: 100px;
margin: auto;
}
}
#media (max-width: 650px) {
figure {
max-width: 100px;
font-size: 10px;
}
}
The code snippet, for better view of the changes:
#main {
height: 100%;
background-color: #eee;
padding: 10px;
}
#title {
text-align: center;
}
body {
margin: 0;
color: #333;
}
#img-div {
/* position: relative; */
background-color: white;
text-align: center;
padding: 15px;
}
figure {
/* float: left; */
display: inline-block;
position: relative;
max-width: 300px;
height: auto;
text-align: center;
margin: 0;
}
#media (max-width: 960px) {
figure {
max-width: 150px;
font-size: 12px;
}
figcaption {
max-width: 70px;
margin: auto;
}
}
#media (max-width: 650px) {
figure {
max-width: 100px;
font-size: 10px;
}
}
img {
max-width: inherit;
border: 5px solid white;
border-radius: 50%;
}
.figLeft {
transform: translateX(30%);
}
.figMid {
z-index: 1;
}
.figRight {
transform: translateX(-30%);
}
<main id="main">
<h1 id="title">Albert Einstein</h1>
<div id="img-div">
<!-- Figure 1 -->
<figure id="image" class="figLeft">
<img src="https://imgix.ranker.com/user_node_img/50065/1001294480/original/smoked-cigarette-butts-he-picked-off-the-street-photo-u1?w=650&q=50&fm=pjpg&fit=crop&crop=faces" alt="Albert Einstein" class="img">
<figcaption id="img-caption">A photo of Albert Einstein
</figcaption>
</figure>
<!-- Figure 2 -->
<figure id="image" class="figMid">
<img src="https://memolition.com/wp-content/uploads/2014/01/albert-einstein-10.jpg" alt="Albert Einstein" class="img">
<figcaption id="img-caption">A photo of Albert Einstein
</figcaption>
</figure>
<!-- Figure 3 -->
<figure id="image" class="figRight">
<img src="https://www.quotationof.com/images/albert-einstein-2.jpg" alt="Albert Einstein" class="img">
<figcaption id="img-caption">A photo of Albert Einstein
</figcaption>
</figure>
</div>
</main>
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!
I tried putting the animated image into a table, but the animation doesn't work in that case.
I can only use HTML and CSS to make this work.
I'm wanting to center the green, spinning circle on the page both vertically and horizontally, have the logo sit without spinning inside of the circle, and have text that changes every 5 seconds right beneath it, centered horizontally and not too far vertically from the edge of the circle.
Right now, with the following code, the mobile version looks like:
(The red circle circles the logo, which is also appearing smaller than I want it to be)
The desktop view currently looks like:
As you can see here, the logo is still slightly off center vertically and the circle is really close to the top of the screen, rather than center.
So far I have in HTML:
<div id="animatedLogo">
<div id="loadingCircle">
<img id="loadingLogo" src="../Content/images/HCSS_GooglePresentation_Spinner_Green.PNG" class="circle" />
</div>
<div id="wordLogo">
<img id="HCSSLogo" src="../Content/images/hcss logo2.jpg" class="logo" />
</div>
<div id="myPhrase" class="phrase"></div>
</div>
<div class="main-container container-fluid">
<div class="row">
<div class="span6">
<form method="post" action="{responseUri}">
{responseFields}
</form>
</div>
</div>
</div>
<link href="../Content/please-wait.css" rel="stylesheet" />
<script src="/Scripts/logoAnimation.js"></script>
<script src="/Scripts/formPostResponse.js"></script>
And in CSS I have:
#animatedLogo {
text-align: center;
}
#loadingLogo {
animation: rotation 2.5s infinite linear;
min-height: 100%;
min-width: 35%;
padding: 1% 0;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
#loadingCircle {
min-height: 77%;
min-width: 35%;
}
#wordLogo {
width: 100%;
height: 67%;
position: absolute;
top: 0;
left: 0;
/*padding: 5% 0;*/
margin-top: 5%;
}
.circle {
}
.logo {
width: 10%;
padding: 11% 0;
}
.phrase {
font-family: "Proxima Nova", sans-serif;
font-size: 24px;
font-style: oblique;
position: absolute;
/* top: 625px; */
margin-left: 50%;
/* text-align: center; */
transform: translateX(-50%);
}
(Added 3:58 pm on 6/20) In addition, I need to make sure the circle doesn't alter its shape and become an oval like it did here when I changed my solution to fit a suggested answer:
Added at 8:19 a.m. on 6/21/18The circle no longer becomes an oval! However, nothing is centered now.
Update as of 9:24 am
We're getting closer!!
1) I realize that I probably should pick a certain ratio of the size of the logo to the size of the spinner to use so that the logo doesn't get so small on mobile versions. I'm searching the web for ideas, but if you know of one particularly fitting for this project, let me know!
2) Now we need to get the phrases under the spinner, rather than out to the side.
Update 3
Bring the phrase out of the centered class like this:
<div id="centered">
<div id="animatedLogo">
<div id="loadingCircle">
<img id="loadingLogo" src="../Content/images/HCSS_GooglePresentation_Spinner_Green.PNG" class="circle" />
</div>
</div>
<div id="wordLogo">
<img id="HCSSLogo" src="../Content/images/hcss logo2.jpg" class="logo" />
</div>
</div>
<div id="myPhrase" class="phrase">phrase phrase phrase phrasephrase</div>
Then in the css change this:
.phrase {
font-family: "Proxima Nova", sans-serif;
font-size: 4vmin;
font-style: oblique;
position: absolute;
bottom: 20px;
width: 100%;
left: 50%;
height: 10%;
text-align: center;
transform: translateX(-50%);
}
To change things on smaller screens use media query:
#media only screen and (max-width: 767px) {
.someClass {
color: red;
}
}
Update 2
Okay, I tested things out and this should work:
html:
<div id="centered">
<div id="animatedLogo">
<div id="loadingCircle">
<img id="loadingLogo" src="../Content/images/HCSS_GooglePresentation_Spinner_Green.PNG" class="circle" />
</div>
</div>
<div id="wordLogo">
<img id="HCSSLogo" src="../Content/images/hcss logo2.jpg" class="logo" />
</div>
<div id="myPhrase" class="phrase"></div>
</div>
css:
#centered {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#wordLogo {
position: absolute;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
/* height: 67%; */
/* position: absolute;
top: 0;
left: 0; */
/*padding: 5% 0;*/
/* margin-top: 5%; */
}
update
Try this out if flexbox is not working:
#loadingCircle, #wordLogo {
position: relative;
}
#loadingCircle img, #wordLogo img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Try using flexbox:
#loadingCircle, #wordLogo {
display: flex;
justify-content: center;
align-items: center;
}
Let me know if it works or not.
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/
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
}