Im working on a interactive show room. In this showroom visitors can click on products to get a lichtbox with more info about that product.
See: http://codepen.io/xiniyo/pen/wLoxE
Is it possible to keep the dots always on the same position as the image below when you rescale the browser. Normal width = 1140px minimum width = 960px. Now the imag scales but the dots always stay on their absolute position.
I`ve tried it with % calculations but that didn't work either. The image scales faster than the dots do.
With difficult % calculations? or some Javascript.
Or is it possible to calculate the Absolute position from the canter of the div?
position: fixed;
This should work
Related
The problem is React RND stores the drop area position in pixels like transform: translate(18px, 18px); so If I test this in different screen resolutions with window resize then this is not working as expected and translate is not calculating again with respect to window size. It's going out of the view if I use small resolution.
Any possible way to fix this ?
I am currently trying to draw a circle of a certain radius at the origin of my chart.
One of the ways I found to do that is to use the Circle component of React Native Svg (I don't know why, I wasn't able to use the one provided by Victory) but then its size and location are set in pixels. I also found that I could use a VictoryScatter and add a single data point at (0, 0), but then it's the same problem again. I also thought of computing the points of the circle with a specified resolution and then use a VictoryLine, but this component only goes from left to right.
Is there a way to draw a circle of a certain size in a chart ? Preferably only the border, but if it's filled it's okay too.
If that's not possible, is there an other library I could use to achieve this ?
I have a little problem I can't seem to solve.
I have an image that I scale with an input range.
I go from 100% width to 150% width.
The problem is that I have on this image
divs in absolute position that have to change position when I scale the image.
How do I do that?
Here's a sandBox to illustrate my problem
https://codesandbox.io/s/brave-bogdan-0149c?file=/src/components/Carte/Carte.js
notice that dot is a child element of a container of img, not of the picture itself. Move width, add position: relative on container. Example: https://codesandbox.io/s/blissful-faraday-qyhmx?file=/src/components/Carte/Carte.js
Also, it's helpful to simplify the problem you're faced with. One dot, no tooltips etc, remove code duplication. Divide and conquer. You'll have much more pleasant time
My current homepage banner scales down to mobile and the image & text shrinks to a size that's unreadable.
How can you make it so that after it scales to a certain point the image stops scaling and it just cuts off the width of the image?
My site: www.riotsociety.com
Example site: sunglass.la
Add this into your CSS files.
This will make your slider 70% of the viewport height. So it will take 70% of any device's height.
this will solve the image problem
.fullwidthbanner-container {
height: 70vh; //please work around this value
}
Now the thing is that the Slider's JS is calculating and giving to each element sizes and styling's.
The buttons content becomes 3px in size on mobiles.
Now I see 2 solutions for this.
Read the documentation of the slider library or plugin if there is any and try to make it not give heights and values for the responsive part of the slider and just do it by your own. You'll need a little bit of CSS.
Or, let it as it is and write on top CSS.
Do you have access to the code? Or it's just a shopify website? I can see that the slider is owl_carrousel
http://www.akaskyness.com/
This is in the early stages of development. I want this "cover" page to be non-scrollable, with the height of the white|black background adjusting to the height of the browser window. At the moment, when reducing the height of the browser window, the headers don't shift up proportionally and a scrollbar appears. I'm not really concerned about browser width at the moment because I haven't added any code for that yet.
I think I see what you mean - you want the <h1> and <h2> elements to shift vertically as the viewport height is resized, so that they don't end up off the screen (when it gets too short) and create a scrollbar.
In your current CSS, you try to do this using margin-top:17% on <header>. This seems like a logical approach, except something curious happens: the margin-top never changes, regardless of how you resize the browser vertically.
I'll be honest, this stumped me for a while, so I did some searching around about margin behaviour and found out this critical piece of information: "The percentage is calculated with respect to the width of the generated box's containing block." So the browser height is completely ignored in the calculation! If you resize the width of your browser, you can actually see how your headers move up and down on your webpage.
Well, that completely invalidates using a percentage margin to attempt to vertically align <header> relative to the viewport height. What now? Vertical alignment of elements is actually something lots of other developers have tackled in various ways. Here's a simple one that uses absolute positioning, by only rewriting the styles for <header>:
header {
margin-top:-3em;
position:absolute;
width:100%;
top:50%;
}
Here's a JSFiddle demonstration of this new CSS. Note that margin-top:-3em; is a bit of a guess on (half of) how tall your headers are, so if you don't want to hard-code that value, you'll probably have to look at a different approach for vertical alignment (this is just one of the easiest). Also, if you don't want it vertically centered, just change top:50%; to a different percentage value.
Hope this helps! Let me know if you have any questions.