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.
Related
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 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
I'm learning how to make a website and I've finished my first page but for some reason I always see a white space on the side of the site, with a scroll bar to scroll to it. When I tried checking the site on a smaller screen, I noticed that my image goes beyond the border, so that's probably the issue. It shows up like this:
with that code being the only place where I've included the image, the code is:
<div class="col-md-6 text-center">
<img src="Images/home.png" class="img-flui">
</div>
and this is what the page looks like in full mode:
no idea what the issue is.
I've attempted to change the size of image and I've also tried to check if there is some other image whose size is bigger than it should be but I don't see anything, the full code is 200lines long not sure if i should share it
not sure if this will help anyone in the future but I had a typo in"<div class="container">, I typed contianer instead, I corrected it and the side space disappeared.
If you dont want to mess with css just set the image width to "80%" instead of fixed value. this will make the image with depend directly on its container width. You may also be interested in object-fit css property
More info here: https://www.w3schools.com/css/css3_object-fit.asp
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 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.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 11 years ago.
Improve this question
i want to have the gradient as background image like this
how can i achieve that
EDIT:
I want to stretch down to bottom , but if i repeat it then i see the top bar gain , i want that dark portion remain at bottom and central part expands
http://gradients.glrzad.com/
OR
http://www.w3schools.com/css/css_background.asp
If you really-really need to achieve this with background image, here is an example.
Of course it doesn't work everywhere — you need JS polyfill to make browser that don't support background-size property happy. I would recommend jQuery Backstretch for this.
But, what you really want to do (I hope so, at least) is to make it as flexible as possible and thus, you should take a look at this or this CSS gradients tutorial instead of the image. And, of course, you can use one of the CSS gradients generator like:
http://gradients.glrzad.com/
http://www.colorzilla.com/gradient-editor/
http://css3please.com/. This one is useful for CSS3 in general.
I would do it using a div or other element at the top of the page to give you the 'bar' and use a gradient background image, attached to the body in your css, aligned to the bottom and repeated.
body{
background:url(yoururl.png) repeat-x bottom;
}
For the 'bar', use the following CSS for the same style effect...
.topbar{
position:relative;
top:0px;
left:0px;
height:30px; /* or whatever height you want */
}
Apply your colours and borders to the bar however you see fit.