I am currently working on an eportfolio to showcase some of my projects for scholarships I will be applying to in September. I have the site perfect except for an image that doesn't seem to be sizing correctly when on mobile. Can anyone offer me some assistance? See relevant code and screenshots below:
HTML
<figure class="about-me__img--container">
<img src="./assets/undraw_Online_cv_re_gn0a.svg" class="about.me__img" alt="">
</figure>
CSS
.about-me__img--container {
flex: 1;
display: flex;
align-items: center;
margin-top: 48px;
animation: fade-in 1200ms 800ms backwards;
}
.about-me__img {
width: 100%;
}
#keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Desktop Version
Mobile version
Related
I was wondering if someone can help me troubleshoot an issue I'm having on a Squarespace site I'm currently building. I'm currently using a Fluid Engine section with a background video and placing some custom code in a container for an animation (See here: https://grapefruit-ellipse-2jhy.squarespace.com - Password: Lovetheone2023).
The problem I'm having is that this works fine in Safari, but just doesn't seem to be working in Chrome. However, when testing the code in isolation on Codepen using Chrome, the animation works as expected, so something about the combination of Squarespace and the code seems to be creating an issue which I can't figure out.
Any help would be greatly appreciated! For reference please see the custom code below
<style>
.animated-alternating-heading .h1 {
position: absolute !important;
display: inline-block !important;
text-align: center;
width: inherit;
animation-name: alternate !important;
animation-duration: 20s !important;
animation-iteration-count: infinite !important;
opacity: 0 !important;
}
.blue {
color: #31C0D2 !important;
}
.magenta {
color: #E2144E !important;
}
.peach {
color: #F39B40 !important;
}
#keyframes alternate {
0% {
opacity: 0;
transform: translateY(30px);
}
8%,
25% {
opacity: 1;
transform: translateY(0px);
}
30% {
opacity: 0;
transform: translateY(-15px);
}
}
.animated-alternating-heading .h1:nth-child(1) {
animation-delay: 0s;
}
.animated-alternating-heading .h1:nth-child(2) {
animation-delay: 5s;
}
.animated-alternating-heading .h1:nth-child(3) {
animation-delay: 10s;
}
.animated-alternating-heading .h1:nth-child(4) {
animation-delay: 15s;
}
</style>
<div class="animated-alternating-heading">
<h1 class="h1">We believe all children have a right to <span class="magenta">survive</span></h1>
<h1 class="h1">We believe all children have a right to <span class="blue">thrive</span></h1>
<h1 class="h1">We believe all children have a right to <span class="peach">flourish</span></h1>
<h1 class="h1">Making a Difference One Child at a Time</h1>
</div>
I am unable to debug on iphones, was hoping someone would be able to point me to the problem.
I got the below code which shows marquee text - scrolling text. Works fine on all platforms except iphones. Any idea what's causing the issue?
On iphones it seems to be empty, but then all of a sudden itll show really fast scrolling text, then nothing again
.marquee {
margin: auto;
margin-top: auto;
padding-bottom: 32px;
margin-top: 55px;
}
.marquee-wrapper {
position: relative;
overflow: hidden;
height: 40px;
display: flex;
justify-content: center;
}
.marquee-words {
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
position: absolute;
z-index: 1;
}
.marquee-words span {
display: inline-block;
padding-left: 100%;
animation: marquee-keywords 30s linear infinite;
-webkit-animation: marquee-keywords 30s linear infinite;
font-size: 20px;
letter-spacing: 0.2em;
animation-delay: -14s;
-webkit-animation-delay: -14s;
}
.marquee-double span {
animation-delay: 1s;
-webkit-animation-delay: 1s;
}
#keyframes marquee-keywords {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}
#-webkit-keyframes marquee-keywords {
0% {
-webkit-transform: translate(0, 0);
}
100% {
-webkit-transform: translate(-100%, 0);
}
}
<div class="marquee">
<div class="marquee-wrapper">
<p class="marquee-words">
<span>One example and in front of the room, One example and in front of the room</span>
</p>
<p class="marquee-words marquee-double">
<span>One example and in front of the room, One example and in front of the room</span>
</p>
</div>
</div>
I did not pin down exactly why IOS might be getting confused, but it may be some combination of flex and animation delays because if all this stripped away the problem disappears.
As you already have two copies of the complete text, this snippet simply puts them altogether in one element and animates that element but moving it just 50% of its width then starting again.
That way the start of the text goes directly into the position of the start of the second copy so the changeover is visually seamless.
.container {
overflow: hidden;
}
.marquee {
margin: 0;
padding-bottom: 32px;
margin-top: 55px;
display: inline-block;
}
.marquee-words {
white-space: nowrap;
animation: marquee-keywords 15s linear infinite;
font-size: 20px;
letter-spacing: 0.2em;
}
#keyframes marquee-keywords {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-50%);
}
}
<div class="container">
<div class="marquee">
<div class="marquee-words">One example and in front of the room, One example and in front of the room, One example and in front of the room, One example and in front of the room, </div>
</div>
</div>
Note: although the text is styled not to wrap it seems that a trailing space causes a slight mis-alignment of the text (a very slight jerkiness) when it is repeating at 50%. The final trailing space is replaced with a non breaking space in the snippet so that this space does not get ignored.
I am just starting HTML and some basic CSS, Im here trying to make a Rocketship push up another image with some simple tags,
Ive tried everything.
I have right now,
<div align="center" >
<marquee behavior="scroll" direction="up">
<img class="ImageOne" src="images.png">
<img class="ImageTwo" src="falcon9-render.png">
</div>
</marquee>
I have tried some CSS which is in my stylesheet.css right now, and here is that code.
image {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
}
.imageOne {
z-index: 0;
}
.imageTwo {
z-index: 1;
}
and at this point, i dont even know if im using z-index in the right context. If its hard to see my vision, Im bascially trying to push and image up with another image under it. or create that kind of visual, i dont know if i have to edit the pixel and align them up. The rocket seems to be being in the center but the src="images.png" is on the side but its under the tag...
Sorry if this is dumb and simple but I couldnt find anything.
As Requested in comments; https://jsfiddle.net/7ohrpk42/
Updated Solution:
img {
margin-left: auto;
margin-right: auto;
display: block;
}
<DOCTYPE HTML!>
<html>
<body bgcolor=“#add8e6”>
<title>The Most Best Worst Websites</title>
<div align="center">
<marquee behavior="scroll" direction="up">
<img class="ImageOne" src="https://i.postimg.cc/g2ZJTkHk/images.png">
<img class="ImageTwo" src="https://i.postimg.cc/mD5W47bx/falcon9-render.png">
</marquee>
</div>
</body>
</html>
Your questions a little unclear without a jsFiddle, but I think you are trying to do something like this:
img {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
}
.imageOne {
margin: none;
}
.imageTwo {
margin: none;
}
<div align="center">
<marquee behavior="scroll" direction="up">
<img class="ImageOne" src="https://place-hold.it/20x30">
<br>
<img class="ImageTwo" src="https://place-hold.it/20x30">
</marquee>
</div>
What you're trying to achieve can be done by setting the "f&*k you" image as the background of the marquee and background size to 'cover'. Like this:
marquee{
background: url('https://i.postimg.cc/g2ZJTkHk/images.png') no-repeat;
background-size: cover;
}
I updated your fiddle https://jsfiddle.net/0vd79j2h/
<marquee> is Deprecated
It is strongly recommended that <marquee> be avoided -- it's deprecated and on its way to becoming obsolete. We can still customize HTML elements to behave and appear as a <marquee> with CSS animation (or even with JavaScript/jQuery although it wouldn't be as efficient as CSS). The following demo uses CSS animation only, and the only images are actually fonts (like emoticons)
Demo
.marquee {
width: 30%;
height: 50vh;
/* Required on Parent */
overflow: hidden;
font: 400 15vh/1.5 Consolas;
background: rgba(0, 0, 0, 1);
padding-left: 15px;
margin: 20px auto;
}
.marquee b,
.marquee i {
/* Required on Child*/
white-space: nowrap;
display: table-cell;
vertical-align: baseline;
/* Infinite Loops */
animation: climb 2s linear infinite;
animation-fill-mode: forwards;
/* Set to 0s in order to have a point of reference */
animation-delay: 0s;
}
.marquee i {
animation: fall 2s linear infinite;
}
/* Required for complex CSS animation */
/* Bottom to top / Left to right */
#keyframes climb {
0% {
transform: translate(-200%, 300%);
}
100% {
transform: translate(300%, -300%);
}
}
/* Top to bottom / Right to left */
#keyframes fall {
0% {
transform: translate(200%, -20%);
}
100% {
transform: translate(-300%, 300%);
}
}
<header class='marquee fall'>
<i>🌠</i><em>✨</em>
</header>
<header class='marquee climb'>
<b>🚀</b><em>🌌</em>
</header>
My HTML code is
<div class="container1">
<div id="container-table"></div>
<div id="container-tablec"></div>
<div id="container-tableq"></div>
<div id="container-table"></div>
<div id="container-table"></div>
</div>
Now, each of these DIVs generates a widget (similar to the one in stock markets). I want to add all of these in a marquee effect which runs endlessly and there is no gap between the last div and the div of the next loop.
I'm a newbie to web development. I've tried using tag but, there is a gap between the ending of the last div and the beginning of the next loop. Also, MDN suggests that I should not use it as it is an obsolete feature.
I want to give it a look similar to the one in stock markets where the entire loop id endless and runs infinitely.
Can anyone suggest me how I can achieve this using CSS3.
Any help would be appreciated. Thanks in advance.
This will help you
/* Sets up our marquee, and inner content */
.marquee {
overflow: hidden;
position: relative;
padding-left: 100%;
/* Some browsers may require -webkit-animation */
animation: reduce 20s linear infinite;
}
.marquee__inner {
white-space: nowrap;
display: inline-block;
/* Some browsers may require -webkit-animation */
animation: scroll 20s linear infinite;
}
/* Creates two white-to-transparent gradients at the ends of the marquee */
.marquee::before,
.marquee::after {
z-index: 1;
top: 0;
left: 0;
position: absolute;
width: 50px;
height: 100%;
content: "";
display: block;
}
.marquee::after {
left: auto;
right: 0;
transform: rotate(180deg);
}
#keyframes reduce {
to {
padding-left: 0;
}
}
#keyframes scroll {
to {
transform: translateX( -100%);
}
}
<div class="marquee">
<span class="marquee__inner">some text .</span>
</div>
Fiddle Example
I have a div that is acting as a navigation bar for my webpage. The div consists of a horizontal unordered list where each list item is an image. The unordered list has a fade-in animation on load, and each list item has a hover effect where it grows in scale upon mouseover.
For some reason, whenever I load the page, either in Dreamweaver's live view screen or as a preview on the web browser, the div starts a few pixels off the position to the right, and once the fade-in animation is completed, it 'twitches' back to its proper position.
Its very frustrating because this is not complicated code. I only have the Source Code page and its CSS stylesheet loaded in the project.
This is all the HTML code related to the Navigation bar:
<div class="Nav">
<ul>
<li>
<img src="icons/filmicon.png" width="120px" height="120px" alt="Filmography"><br/>
</li>
<li>
<img src="icons/cameraicon.png" width="120px" height="120px" alt="Photography"><br/>
</li>
<li id="josh">
<img src="img/joshforsite.png" width="300px" height="300px" alt="About Me"><br/>
</li>
<li>
<img src="icons/designicon.png" width="120px" height="120px" alt="Design"><br/>
</li>
<li>
<img src="icons/brandicon.png" width="120px" height="120px" alt="Branding"><br/>
</li>
</ul>
</div>
...and this is all the CSS code related to the Navigation bar:
.Nav {
display: flex;
flex-direction: row;
justify-content: center;
list-style-type: none;
position: absolute;
width: 100%;
padding-top: 16%;
white-space: nowrap;
.Nav li {
vertical-align: middle;
display: inline-block;
padding-right: 4%;
opacity: 1;
-webkit-animation: fadein 2s;
-moz-animation: fadein 2s;
-ms-animation: fadein 2s;
-o-animation: fadein 2s;
animation: fadein 2s;
transition: all .3s ease-in-out;
.Nav li:hover {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
#keyframes fadein { from { opacity: 0; } to { opacity: 1; }}
#-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; }}
#-webkit-keyframes fadein {from { opacity: 0; }to { opacity: 1; }}
#-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; }}
Again, I am a beginner at HTML & CSS so I don't how much of a mess the coding is.
Here is a link to a YouTube video I uploaded showing the problem. It also shows towards the end a second issue I'm having whereby the growing hover effect is bugged. Any help with this would be appreciated.
Thank you!
Change the padding-right on .Nav li to a px based solution instead of a percentage and it should eliminate that jump left.
Also, you're missing your closing curly brackets for each block.
You are using images with alternative text. The glitching is probably caused by loading the images. Try to preload the images with javascript and it might help.