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 2 years ago.
Improve this question
I'm trying to add CSS to my PWA app so it can look better on "notch" devices. I roughly drew it and pointed it out with the red arrows. Here is my website if you need to inspect element the CSS classes: https://kyle.awayan.com/. Are there any recommendations on how to achieve this, to get border-radius or something to work with the whole page globally? I tried putting it in body but it doesn't work. Another edit: tried to add border-radius to a wrapped div (specifically gallery if you inspect element my website), and it makes all the items (pictures, menu, etc.) rounded, but not only the edges of the page.
For me the above borders were implemented by the following code in CSS:
overflow-y: scroll;
style="border: solid; padding: 15px; border-radius: 15px "
I got it, I just used the __next div as a wrapped div, and placed this CSS in here from this https://codepen.io/chriscoyier/pen/EmKCa (which was from https://css-tricks.com/body-border-rounded-inside/). After modifying it, I was left with this:
#__next {
border-radius: 10px;
overflow-y: scroll;
}
Looks like I had to add overflow-y: scroll for the border-radius to work.
Edit: It also works when I put it in the body tag. FYI putting overflow-y: scroll messes up with scrolling listeners, so my infinite scrolling doesn't work anymore. Might not want this solution since I don't want to put all the scrolling listeners on one single div... there's a lot of things on my website that react to scrolling on various pages. But here is the answer for people that want to achieve the same thing.
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 4 years ago.
Improve this question
I need some help here. My final project is due tomorrow and the mobile responsive view of the app is completely off. I don't know how else to explain it other than just giving you the link to the URL.
https://venpresath.github.io/FinalProject/#!/home
It appears that the animation that I put onto the spinning record is making the width of the screen larger than the background is.
I tried overflow: Hidden; but it didn't correct the issue.
One work around is to hide the overflow of the record, something like:
.homeContent{
overflow-x: hidden;
position: relative;
}
Try placing overflow: hidden; directly on the body tag, this should ensure that whatever happens in the content the body shouldn't scroll horizontally.
you can use transform scale and transform origin css. please add below css. this is the demo http://recordit.co/UK63B2vKiR
.homeContent{transform: scale(.8, .8);}
body{background: darkslateblue!Important; overflow-x: hidden;}
*{max-width:100vw;}
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 have a border on the following website http://geertsprengers.be/ under the logo's of the nav.
Now the problem is that when I'm on the mobile website and there are 2 lines of logo's, the border should change the same as the arrow, below the clicked logo.
What is the easiest way to accomplish this?
Could you please provide some more information on what exactly you want to happen?
From what I could gather you want the border that is below the logos in your nav, to stay below the logos when the browser is brought down to a mobile size (when your logos go onto two rows)?
If this is the case you will simply need to do two things:
Change the float: left you have on the logos (li tags) to display: inline-block.
Change height: 54px you currently have on the nav to height: auto.
The problem is the you were trying to keep floated elements contained inside an element with a fixed height, which won't work in your case here. Instead you need to remove the fixed height, which will allow the nav to expand to fit the floated elements when they break up.
Hope this helps.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I just started learning HTML/CSS and I've encountered a problem. On my website (www.seandorsman.nl) I have a nav bar on top with a drop down menu. The menu works fine but it is behind the slideshow I have on the main page.
Is there a way to make the navbar always appear in front of the slideshow?
You want to use z-index: in your stylesheet, so I would make your nav bar a higher z-index than the slideshow. This is basically a hierarchy of where elements lay on top of each other, setting z-index: 999; in your css for the navigation bar and drop down should fix your issue.
I would try to show you where exactly to add it but the link you provided does not seem to work.
As other people have mentioned, you will want to apply a high z-index to the navbar. However, for this to work you will also need to apply position:relative;, as z-index requires a position to be set.
you can add a z-index to your menu items. for example, if your css is like this:
#menu li {
z-index:9999;
}
it would take all of the list items and move them to layer 9999. sometimes the position attribute can play into this as well, but I would try modifying the z-index first.
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 8 years ago.
Improve this question
I've had two developers look at this and they haven't been able to figure out what is causing the issue.
On the following site, the subscribe bar (top of page) looks fine and functions properly in Chrome, Safari and Firefox, but in IE an issue occurs where it shifts the Subscribe button down a line and overlaps with the 'Resources' nav item. A specific width must be set for the float to work properly but when you set the width to auto it floats under the element to the left of it. While it still functions properly this way, it is problematic because it looks awful.
I believe the issue is CSS related but please also note I am using a theme in WordPress and integrating a MailChimp subscribe form.
Any thoughts of suggestions would be greatly appreciated.
Thank you in advance - Ashleigh
Site Reference
Please note that I'm not a CSS pro either.
I'm looking at your website using Firefox 16.0.2 and I see the same problem you are describing.
Using Firebug, I believe you should remove the width: 430px from <div id="mc_signup">. The current width is too small for the complete form and I think that is the reason for the subscribe button to move below the rest of the form. (it simply wraps because there is not enough horizontal space)
See the screenshot, the blue area is the <div id="mc_signup">, which is limited to 430px.
screenshot http://img841.imageshack.us/img841/1540/denised.png
I hope this answers your question.
The problem, you described is consist in Opera and Chrome as well.
But I removed the padding: 0px 10px; part from input#mc_signup_submit.button and it was fine.
I am experiencing issues under Chrome. Increasing #mc_signup's width to 440px; should fix your problem.
Alternatively you could change #subscribe .wrapper .center to width: 100%; text-align: center; and replace the floats on .leftcopy and #mc_signup with display: inline-block;
I recommend you edit your question if you want a more specific answer. Please add screenshots.
I strongly recommend you look at the following link on how to properly float elements.
www.quirksmode.org/css/clearing.html
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Blogger has this new fancy theme that I see a lot of people using, but it seems to me to have an obvious CSS bug as the link gadget overlaps the scrollbar. Are you seeing this problem as well?
The gadget div has it's CSS set to right:0px and z-index:3000, which causes it to overlap the scrollbar on Chrome for Windows. I would think that browsers shouldn't allow overlapping of scrollbars in the first place? And if they would allow that, isn't it still a usability bug from Google?
UPDATE: Here is a link with a blog where this happens: http://www.judegomila.com/2012/10/how-to-name-your-company.html
And here is the same theme, but without that problem: http://googleblog.blogspot.jp/
you have set the overflow-y in the <div class="viewitem-inner"> remove this its on line no 1648
and try the
html {
height: 100%;
overflow: scroll;
}
also remove the position:fixed; from <div class="viewitem-panel"> on line no 1589
working
I would say this is a usability bug in the Blogger theme. A scrollbar always belongs to some element and elements can be overlapped with other elements – thus the scrollbars could get hidden.