so i have to code a responsive layout that is very very similar to this solar system picture i'm linking.
Basically i'm using as page background an image of just the sun and the planets' orbits and now i have to place all the planets as SVGs right on top of their own orbit's line, like in the picture.
Positioning the planets using position: absolute is easy but when i shrink the page everything becomes messy, of course.
The background image is already responsive but how can i make it so the planets as well stay in place even after i shrink/expand the page?
Found a way: i used a grid that covers the entire page and put the SVGs of the planets in each grid's box. I'm using tailwind and helped myself with this website btw https://www.tailwind-tools.com/grid
Related
So I've built a portfolio site for a friend of mine - that I'm having a small issue with. I'm not personally sure if it's solvable, but let's see!
She would like to have a sticky footer on the homepage, but also have the main image/gif fully in view above it. So I've given the main image a max width, and centred it.
The problem now is that the background of the image is a grid/checkbox style pattern (not css grid, a visual grid). So I've put that behind the image, which means it won't really ever line up with the main image.
Here's the link, I'm sure it'll make much more sense by seeing it! https://magpie.work/
Is there any way around this?
I am trying to do this fun resume site and am stuck with the backgrounds itself. I have 3 backgrounds in all: a picture with a mountain and some sky, another picture with just the mountain cut out, and a nice little Easter egg hidden in between. I made the front and back layers scroll-able, and the middle one fixed, so the little dickbutt hides behind the mountain when the user scrolls down.
But the problem is, the dickbutt image is somehow not positioned properly even if I manually positioned it in Photoshop before saving it as an image. So I used the background-position tool to set it right, and it's all right now, except, it is so just for that specific browser size. In the mobile view, not only is the background not centered on the mountain peak, but the dickbutt is way off with respect to position.
TL;DR: I want to position one of my multiple backgrounds with respect to one of the other backgrounds, but instead it is getting positioned with respect to the viewport. What should I do?
Here's my code: (github link)
I want the page to look like this:
There is no way to position of images with respect to other background . but you can achieved your task with multiple div having multiple background and arrange them using position absolute and z-index
I have an image carousel on my site's homepage, and sometimes a few of the images have slightly higher height and width. This causes the page elements, such as a list of test items below the carousel, to move around as each image in the carousel changes.
What is the best solution for stopping everything on the page from moving around? Should I enforce the sizing of each image on upload from the CMS? Should I force the sizing in the markup? Is there a set of CSS rules to apply to the Bootstrap Carousel to conform the images to a certain, fluid, responsive size, such that each image change results in nothing on the page moving around due to size change?
Todd, Hi there. Have a look at this post here to do with Bootstrap carousel.
There is a Fiddle with full code for you to use.
I have 4 very different sized images in a responsive carousel. The carousel does not change size when each image slides in.
You could use this to get started to have a responsive carousel.
Try resizing it to see.
Hope this helps.
I'm fairly new to bootstrap and I having trouble making my site do what I want it to. Hopefully someone can steer me in the right direction.
I used bootstrap to make a nice responsive grid for my site within a container. The problem I am having is that I would like my backgrounds (different backgrounds in different sections) to fill browser window while the page content stays at 1170px max-width. Is there anyway to do this?
of course. adding your own css is not that bad but make sure your css is in last (e.g , )
do this in your background telling your div
<div style="position:absolute; top:0;left:0;background-image: url('img/urbg.png');">
dont box here. experiment, play and explore. bootstrap is boxed dont get TRAP with BOOTSTRAP. its cool but you need to know when to handle design with image background. see this
I have a secondary navigation at the top right corner of a site design. It is an awkward shape - 3 rectangles rotated - and all 3 need to be clickable.
It is a Twitter Bootstrap responsive site.
What is the best way to make them link? An image map seems too dated - chopping up 3 clickable images is awkward due to the angles involved. 3 Div's on top maybe? How can the DIV's keep correctly aligned with their targets whilst remaining responsive and working with Bootstrap?
UPDATE
The click areas need to stay in the top right over the image the whole time at every responsive width - including the mobile size.
You need to use css-transform to achieve what you are looking for.
Read the below for more details.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform