since 6 hours I'm trying to produce the following output on my different mobile devices:
As you can guess there are two different pictures: The background of a joystick and the joystick itself that should be draggable.
Whatever I try: It looks different on other devices or if I turn my device or something..
What I wish to achieve: The picture like you see it should have a width of 70%. That seems to work.. but I can't place my stick exactly into the middle.
I was trying with images, divisons with backgrounds, percentage-values, absolute and relative positions but now its time for me to ask some guys that could know how to do it.
I have tested to much code to post here but please give me any advices.
Related
I want to make a website where if the user zooms out the content get smaller and he sees more of the page but the width of the page doesn't get stretched out to the sides.
Here is an example of a page: https://www.valhalladc.cz/ . I would like to use flexbox to obtain these results if possible.
I tried finding some tutorials but i feel like the problem is too specific and i have no idea how to solve it.
I am trying to display a grid of images on my website. The problem is they are all different sizes which makes it look really sloppy if you use a really wide or really elongated image. Is there any resources you could suggest to help with this problem. I would like to make a grid of images that are all the same size. A cropping function similar to Facebook profile picture system would work great.
I found a website that is exactly what I need. There is a website that maintains the aspect ratio and has a nice interface. I think I will implement this on the site.
I have begun developing a webpage, just playing around, and I noticed an issue. I code with my live site on one half of my screen, with my editor on the other. It was all going fine until I extended my web browser fully and noticed that only part of my site was re sizing how I wanted it too. Sadly my site is not live, however I do have a link to the code: http://pastebin.com/yeWzfsBW
In theory, the image (logo) doesn't scale down when I resize the window, it stays the same size no matter what. I attempted to use percentages instead of pixel width/heights however it seemed to have no effect. I will try to pop this live so you can see what I mean exactly.
Fullsized browser: http://imageshack.us/photo/my-images/585/fullsizen.jpg/
windowed mode: imageshack.us/photo/my-images/42/resizedkl.jpg/ (please put in the http:// I couldn't link more then two links in this post)
Hopefully you can see what I mean, i'd like the logo to scale, like the #info css section.
Thanks!
no need to wrap the image in a div.
set width & height in css.
set max width and max height.
there is a challenge with keeping the aspect ratio on the image.
to get started, below is an example using your code. after looking at this you may provide feedback about exactly you are trying to achieve.
http://codepen.io/seraphzz/pen/thGkI
There are lots of website themes that have a slideshow or image frame that is styled to look like it's a device such as a mobile screen or tablet screen or computer monitor. Please see below:
I have spent the last 4 hours looking for some code or an open source plugin that would enable me to show images this way. All I have found in 4 hours is yootheme and hostmoog that both charge for the plugin.
How does everyone else get these device style frames around images please? Do I need graphics software?
This question should help others too. I've spent ages searching under every conceivable combination.
Thanks in advance.
First, create your device "background". Then, divide the images into four pieces:
The part of the background that appears above the top of the screen image
The part that appears below the bottom of the screen image
The part that appears to the left of the image between the top and bottom
The part that appears to the right of the image between the top and bottom.
Then, create three <div>s. Place the top and bottom pieces in <div>s 1 and 3, and divide the 2nd into three smaller <div>s. Render the left and right pieces in the left and right sub-<div>, and finally, render your slideshow in the center piece.
I don't know if I understand your question perfectly, and I may be way off, but I'm going to try to answer it to it from what I think your asking. Responsive Design is what you're looking for. Displaying the page perfectly across all devices.
There is also a tool that I use to see my webpages in different resolutions, Resize my browser that lets me see how my page will look on different size browers, iphones, etc... If your code is correct this is a very useful site.
Hope I somewhat answered this question.
I've been exploring methods for full-width background images combined with type. I found this website: http://starvedforattention.org/
I cannot figure out the logic for how the page works once the user starts scrolling. I know it's along the lines of big DIVs with backgrounds alongside setting absolute/relative locations.
Approaches for coding this would be much appreciated.
As I can see, what you are looking for is a Parallax Scrolling Effect.
Perhaps you must take a look to jParallax if you're going to work with jQuery. :)
Best!