Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
Currently I have a navbar set up however when I shrink the tab to tablet size, the navbar stacks and looks really weird. However, when I shrink all the way to mobile the problem is fixed. What is the best way to determine when the navbar shrinks to hamburger? Ideally for me, this would be as soon as the navbar headings begin to stack themselves.
If you're using bootstrap just check the width size when it shrinks to mobile with Google inspect,
If the #media query triggers at e.g 500px just add some more pixels so it triggers when you need it to, for example if the navigation bar stacks and looks bad at 700px, change the #mediaquery size from 500px to 700px.
(That was just an example , because you did not post any code)
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 10 months ago.
Improve this question
I have a page with 3 flip cards based on this example. For some reason, during the flip animation, a scroll bar appears on the side of the page and then disappears when the animation is over. It causes the page content to shrink and expand for a second.
Is there a way to avoid it? It seems like the animation expands the page width by a couple of pixels.
You could try an overflow: hidden on the Card-Container.
It will cut of overflowing content and therefore avoid a scrolling bar.
https://developer.mozilla.org/de/docs/Web/CSS/overflow
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
It seems that the bootstrap carousel images are being given a height/width attribute by views or bootstrap_views. This means that when the page is resized, or indeed viewed on a smaller screen/device the image is cut off as the carousel "window" is shrunk. The image in shrink in mobile devices. Also caption is not aligned properly in mobile devices.
Try by adding img-responsive class.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
i am working on this site:
http://www.aquidneckislanddaycamp.com/AIDC2/index.html
i used a template and got everything functioning pretty well, except that when i size the screen down, anything lower than 1080 pixels, the banner leaves a space in between itself and the menu bar...you can see it when you size the above link down. i have tried writing different things in the media query section...i am not sure how to fix this. i am newer at code and trying to learn. can anyone help? i did not post the css or the html because i know it is easy to see with web developer tools...but i can if anyone would like me to. thank you.
Apply display: block to the img inside your banner container.
Hi if you are using bootstrap please check this link to get the default media queries for different screen sizes Bootstrap Media Queries
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm working on this website: www.artetia.com
The thing is that when I resize my viewport I get a white stripe in the right side of the browser as if the Body of my website is smaller or having a minimum width. Can't find how to solve this, I tried with Firebug to check the structure and seems that the html can't get smaller than 960px or so...
You need to stop the backgrounds being wiped out when the viewport is narrowed below 960px. Here's one way to do that via CSS:
div[id^="slide"] {min-width: 960px;}
(For those not seeing the issue, it's a common layout issue. If you narrow the browser below 960px, a horizontal scroll bar appears; and if you scroll right, the backgrounds have been wiped.)
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I've been trying to figure out for hourssssssss how this website does this. If you go to [] and resize your browser screen, you'll see that the main content container in the middle gets smaller as your browser size gets smaller. How does it work?
I'm trying to do something similar with a wordpress website I am building.
Thank you,
AJ
All of the stacked elements in the main column have a width of 65%, which refers to a proportion of their parent element. In this case, that's the entire width of the viewport. They'll resize to their min-width, which is set to 700px, and also their max-width, which is at 1920px. Pretty straight-forward CSS.
Get familiar with Firebug and/or Chrome and Safari's developer toolbars. They're indispensable for anyone working with websites.
I believe you are referring to it being Responsive. It likely uses CSS #media queries to change the sites width depending on the resolution of the browser.
You can find more information here: http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
Also, your site is not a great example of it, see better examples here:
http://mediaqueri.es/