When I slide the webpage down the X pictures slowly become 'Iphone' images.
What I'd like to know is whether I need to find some plugin or can I use css to code it?
https://www.apple.com/iphone-x/
Related
Currently, I'm browsing some pages and I found that there's a page where the design is very pleasing to me. So I'm trying to replicate it, but unfortunately that I can't figure it out due to my lack of CSS skills.
So here's how that page work:
Whenever the class is active, it'll hop up a bit (the page I'm looking at is using Swiper, too!)
But however, the Hop-up image will go out of the box of Swiper
And what I'm doing right now, there's a box just like that page, but the image or anything else if it's larger than the current box, it'll be cut. I can't make it go outside of the Swiper's box.
Here's how I'm currently doing it, I made a quick dataSample and then mapped it, get the current slide to have the active class, and then CSS it. Any help is appreciated, many thanks.
I've left comment on what I'm doing in the CSS at CodeSandbox.
Code: CodeSandbox - Trying to create Hop-up image using Swiper
I've designed and coded an interactive SVG that I've had to implement as HTML in WordPress because it only acts as a useless static image if it's entered as an SVG in an image block.
So far, that means that it's not responsive and loads at full size on a phone. I want people to see it in full, straight away, not zoom out to see it.
Is there another way to make it work without being an HTML dump? And even as code, how would I reduce it to fit screen sizes? Bearing in mind that my brain may implode if you suggest coding breakpoints or something like that.
I'm using a Blocksy child theme with no page builder.
The code itself works fine so there seems no point in me pasting a shortened version of the code. The page is here, if that helps.
Www.orderaround.co.uk
Right, I've fixed it myself. All I needed to do was remove the width and height specifications from the beginning of the svg code. It now fits to whatever container it's being displayed in.
So im building my first wordpress site at the moment. Most problems i come across i just do a google search, read, learn, fix.
But one continuous problem i keep getting is images and resizing them.
Im really lost as to how it works, its so simple, yet i cant seem to manage them at all.
Heres some of my issues:
I'm using customizr theme, it has a slider, featured images for posts-big and small (featured image and thumbnail).
I resize the picture to the recommended dimensions, but it never seems to actually resize the picture in the box. And that's for all of them, the slider, thumbnail and featured image.
I toy with the dimensions to try to learn whats happening, but it just doesn't make sense to me, the box just zooms further into the image, the image doesn't actually move or try to fit at all when the dimensions are changed.
They also share the same image for the featured image and thumbnail, even if i click 'thumbnail only' and change the dimensions, it effects all of the images.
The slider images are always cut off, even if i change to the recommended dimensions. I've given up with the slider after a week of resizing, trying new sliders, adding slider codes into .php, enough.
But now this issue with a simple featured image and thumbnail is the last straw. So here it is, my cry for help!
How can i get control of my images, resize effectively, so i dont get these issues every time i try to add images into various functions.
Any help is much appreciated, thanks.
I'm working with the Header Image Slider plugin for WordPress (which uses the Nivo Slider) and I can't seem to get the images to the size I need on a smaller screen.
I've looked around plenty and tried various things in my media queries like setting the max-width, but I can't put my finger on what the problem is. Each image is cutting off on the right-hand side. I'd like to get the images to roughly 708x245 on the next step-down. Any advice? Thanks!
My Site
I'm new here and I didn't know where to ask this sort of question, so here's a go. I'm trying to build my new portfolio website, and I'm trying to make it so that in the background I have a cloud that moves from left to right on the screen in the top left hand corner and it wraps around the website when it goes off the screen. How would I go about accomplishing this?
I'm building my site on wordpress, and I'm using HTML5, JS, PHP and CSS3. I tried going about using the css3 #keyframes class to move the cloud, but it didn't work.
Here's a link to my site.
http://www.secret.irmattstenquist.com
Simila sites that do this :
http://vimeo.com/ <-- With the sun and the bottom footer.
http://jsanim.com/ might be a solution. Its a javascript library for animations and you can see on their site they like animated background clouds :)