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:
Related
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 1 year ago.
Improve this question
for Christmas I want to add snow to my website footer , something like this picture
https://assets.stickpng.com/images/5847d74ccef1014c0b5e4806.png
But I don't want to do it with image because it can't be responsive if I use image so I need a css code for that
I don't want to add snowflake , I'm already using this one:
https://codepen.io/DesignCodeBuild/pen/GyNVbY
I wan't to make website looks "It's a snow day and snow is sitting on the bottom of website"
So you can have the image responsive on all screens by using CSS.
First in your HTML you can remove the image and just have an empty Div. The Class dictates where your CSS code will come from (snow-image).
<div class="snow-image">
leave this empty as your image will soon appear here as a background.
</div>
Then in your CSS you could have something like this....
.snow-image{
background: url=(https://assets.stickpng.com.....);
bacgkround-size cover;
align-items: flex-end;
display: flex;
}
This will keep the image dimensions perfectly as a background of that Div rather than inserting the image dire3ctly to your HTML using <img>. It will also auto size to any screen width. Both of the flex commands (hopefully) make sure the snow bed image is positioned at the very bottom of it's parent Div. Hopefully then you can add that JS code you found at CodePen for the snowflakes and you're done :)
When you've done all this. If you cannot see the snow image it could mean the Div has no height. So you could add height: --px; to your CSS where -- is exactly the same number of pixels tall as your image.
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 1 year ago.
Improve this question
Im trying to only show a piece of this img (the laptop). The hidden part being on the outside of the page. How do i make it so it doesn't actually expand the page where you can then scroll horizontally?
Hi Depending on how thing is built, if its in the background image then you will need to use background-position when it goes into a smaller screen resolutions.
If this is an actual then this can be tricky because there is a few options. you can set the parent wrapper to have overflow:hidden and use margins to tuck move the laptop to only be shown.
You can also probably use position absolute to move the image into position.
If you want this to be only a mobile thing make sure you wrap it around a media query
#media only screen and (max-width:768px) {
.myclass {
css: value;
}
}
If you can share some mark up with some css we can better help you :)
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
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 7 years ago.
Improve this question
What I am trying to achieve here is to center my logo and my contact form. I have tried looking on google and here but found nothing that will help. I will include a js bin please anyone help me.
https://jsbin.com/foqemipeco/edit?html,css,output
Add a display: inline-block and margin: 0 56px to #logo for the logo centering. Then, add a display: inline-block to #box-header, and margin: 45px 115px 0 to #box for the form centering.
I use the inline-block trick to bound the main container size to the size of the elements within it. By cutting the size you become able to center the container with lateral margins. Also, it's not really necessary to define the width in #box, and using <br> tags for layouts is a really bad practice, get rid of them, the margin I provided for that container will push it down.
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.