https://riketest.squarespace.com/
This is the website I'm working on. the logo or button move when I make the screen smaller. I need to stay like that while getting smaller until it gets to a certain size for mobile.
Keep in mind, I'm using Squarespace so there are certain restrictions. I need the logo on top of the buttons at all times but it seems to fall out of place when it comes to tablet and mobile.
Help me, please
Related
I have a responsiveness issue on a website that I am repairing. And I have no idea what could be going on.
The website in question is this: https://remolquescuni.com/remolque.../power-box-eco/
It has several responsiveness problems, but to play the one I'm talking about, you have to view the website in a small screen size. (For example, 450 x 760)
You will see that there is a carousel of product images, but the horizontal scroll to navigate between them does not work. It moves the top image (which it shouldn't) and doesn't move the bottom ones.
But, if you keep pressing the shift button + the mouse wheel you can move it perfectly.
carousel of product images
That could be happening? Any ideas?
The web is built on WordPress, with Elementor.
I'm improving the general responsiveness, but with this specific problem I don't know what to do.
I'm trying to make a responsive photography website but I'm having trouble getting it the way I want it. I'm using Dreamweaver and have created responsive images that look great on my screen. I've specified that one image must float left and the other float right, so that they fit nicely beside each other. However, when I make the screen smaller, the images fold under each other. What I actually want is for them to shrink together, maintaining the same layout. What is the best way to establish this?
You need to play with the image size, I advise you to read about media querys for responsive web design, with that you can choose the different size according the screen size in different devices
I'm using bootstrap for a personal website, and I'm having trouble with a Javascript slideshow.
Basically, when the browser window gets smaller, instead of the slideshow DIV content shrinking proportionally and maintaining the sizes of the content, it is cutting off the edges of the content.
The text isnt breaking to another line when I resize the browser it just covers up the content. I'm sure this is very simple but I just cant work it out, would be very appreciated if someone could take a look, here is the link to the website you can see for yourself.
http://www.luke-taaffe.com
I see some issues with your HTML. Layout you have created is not required and you'll keep running into issues as you move forward with it.
Hence i would suggest to fix it now itself.
As you want to use bootstrap, get more idea about their responsive design elements : Tutorial / Bootstrap Responsive Grid System
Then choose a theme among these
It will automatically take care of you design's responsiveness.
Ok I fixed the issue, I spent about an hour looking at the media queries in bootstrap-responsive.css.
First I had to use navbar-right in my header and remove all of the margin, padding I had previously used to position the links.
This was stopping the links this maintained the links to the right of the window without covering them when I resized.
Then the navbar was breaking onto 2 lines, so I had to change the media queries.
Used foundation for the first time as i thought it was an easy way to make a responsive site for all resolutions.
Not responsive at all. I would not say i am knowledgeable regarding web design but i understand how things work.
The site works down to an ipad and looks great however on the smart phone it falls to pieces, background image does not fill screen and nav menu is split onto two lines.
Any advice?
I'm designing a chat page for a radio station and i am working on a 1360X768 Res' on a 32Inch screen.
When i ask friends to check the page layout it gets messy for them or elements get smaller in screen and the page wont stay consistent.
If its possible i would like to know if there is a fixed settings i need to insert to "body" in CSS so things like that wont happen, and when i move an element in my screen it will stay like that with other resolutions/screens.
The web page in question
Warning: There is music on Auto play in the page.
Also, if its ok to ask 2 different things but related.
I want to add the scrolling stats on the bottom to the bottom player..right where it says "now playing".
But everything i try wont make it go on top of it..z-index wont help.
Any thoughts?
The first mistake you're making is you're designing on a particular
resolution.
The second mistake you're making is that the resolution
you're designing on is way above the most commonly used 1024x768.
Take a look at MediaQueries. They allow you to build a fluid website that changes drastically at given resolutions.