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 have a hero image, and on the top of it, I want a logo and menu,
I have given below properties to hero image. and for nav bar I have given a position: absolute; and width : 100%.
I dont want that horizontant scroll bar, please help.this is how my page look like
height: 551px; width: 100%;background: url(../_images/banner_1.JPG) no-repeat;background-size: cover;position: relative;
You mean window horizontal scroll-bar, so to hide that add below code and change you navbar div to 100%,
body{
overflow-x:hidden;
}
for removing horiontal scroll bar
add overflow-x: hidden
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 6 months ago.
Improve this question
Please see this page: you can see the same code snippet twice: once embedded via GitHub Gist and in the second part via Jekyll's internal syntax highlighter Rouge.
I'm trying to style the second code snippet similar to the GitHub Gist. I'm making progress, but I don't know how to reduce the width of the second code snippet via CSS. It should have the same width as the surrounding blog content (like the GitHub Gist) and show a horizontal scroll bar.
How can I reduce the width of the code snippet via CSS and display a horizontal scroll bar?
Thx!
You can set the width to 100% to fill the surrounding blog content and use the overflow-x property to display a horizontal scroll bar.
.highlight {
width: 100%;
overflow-x: scroll;
}
You can use overflow-x: auto; instead of overflow-x: scroll; to let the browser decide when to display a horizontal scrollbar, e.g. when content is overflowing.
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'm fairly new to CSS. As you can see, my web page currently has a lot of space to the left and right of my content, making my navigation bar very long. I'd like to set this to be less wide without effecting how responsive my theme is on mobile or tablet.
I'd also like to centre the social media icons/widget at the top beneath my logo, and to center the links in my navigation bar.
Website here:
http://aspectcopywriting.co.uk/
Can anyone help?
Thanks
While the CSS in Emily's answer does work, it's not the proper way to center a div. According to W3C you should use width and margin on the element that holds the social icons and navigation tabs you wish to center, as seen below:
.social_container{
width: 225px;
margin: 0 auto;
}
.nav_links_container{
width: 605px;
margin: 0 auto;
}
This will center those items within their parent elements.
Well, this is pretty easy. All you need to do is select the div where you wrapped up your social media icons and use the properties text-align with value center. Like this:
.widget_catchresponsive_social_icons {
text-align: center;
}
Everything should be centered now!
For some more reference check in MDN:
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 hav a div tag.In it's css properties i've put the image and the tried to resize it using height and width properties.But instead of shrinking it is getting cropped! How am i supposed to scale it using height and width?
Hope this helps:
div{
height: 100px;
width: 100px;
background-image:url(img.jpg)
background-size: 100%;
}
If image is used as a background. Not sure exactly how your code is set up.
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 just started creating my site and getting into web development. I was creating a social media nav bar . i wanted to place it in the bottom right side of all my pages. It worked fine except for one which showed the nav bar way below the end of my background image. After several attempts to fix it several other pages also started having the same issue.
leloupdevelopment.com
Give this bit in your CSS:
#social-media-icons {
margin: 0;
position: fixed;
bottom: 0;
right: 0;
z-index: 99;
}
This way, it always stays in the bottom of the screen, irrespective of the page size. :)
You should change the z-index but to use that you need to position it to either absolute or relative depending on your element. The higher z-index means your element is going to be on top of the lowest z-index.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
A fun game:
http://revelry-cycles.com/index.html
go to that site, identify the reason behind the white space on the right hand side.
I have been playing this game for an hour or so and I am sick of it! I have used Chrome's Object Identifier and there is NOTHING there.
The reason was not easy to identify, but I'm now pretty sure it's the label "Select bike part". By using tools like Firebug you can see that the element #bbLabel is too wide and thus causing the overflow. The problem is that you didn't change its width, so it still has the default of 100% of the 800px page width, while at the same time a relative offset of 60% to the right is applied. If you add the style rule width: 40% to the #bbLabel the problem is solved.
On the off-chance someone else has the same problem:
HTML:
<body>
<div id="container">
<!--content-->
<!--carousel-->
<!--more content-->
</div>
</body>
CSS:
#content
{
width: 600px;
margin: 0 auto;/*This means the content is centered on the page*/
}
The fact that the images in the carousel were arranged like this:
Content: Rest of page:
|[Current Img]|[Next Img][3rd Image][Final Image]
meant that the page was pushed out to the right, resulting in the appearance of the horizontal scrollbar. The easiest solution is to add overflow-x: hidden to the style for the <body> tag.
The element causing the whitespace is #bbLabel.