I am building this website for a friend of mine. She asked if i could make a slider of the header pics. I have tryd making it full width but it looks different in firefox and chrome and i dont know why.
the url is xx
The problem is that in firefox it has a margin/padding left of a lot, instead of 0. Tried adding !important, but no difference. In chrome it is nearly full width, but still not totally. I think im looking over something obvious :( help is highly appreciated.
The first problem is that you created a row as a container of the slider only. The row adds margin-left: -25px and margin-right: -25px. If you wanna use such a structure, you should put a col-xs-12 (if you're using Bootstrap 4 use col-12) inside row.
After that, you will see a fullwidth slider.
As a consequence your structure will be like that:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
...
slider structure
...
</div>
</div>
</div>
This should fix your problem in Firefox too.
I am not sure if you defined the width of the parent element carousel-example correct. You can extend your bootstrap.css for .carousel with the full width:
.carousel {
width:100%;
position:relative;
}
BR
webbolle
Related
Hello I'm building this site on wordpress: MY SITE. The website is built in Wordpress everything looks perfect. However the follow us along with the 3 icons when you look at it in the monbile (shrink the browser) it gets really huge and crazy. Not sure how to fix it I tried everything.
Right now the header is split up into 3 sections each with a class ".col.-xs-12 .col-md-4" That way when its mobile they stack up on each other. In the first section (the follow us) I have another div with col-xs-4 I believe.
I know this is probably an easy fix. Thank you!
This is the rule from main.css that's causing the problem.
.col-md-4 .social-fixed { width: 45% }
It makes the icons blow up to be 45% of the width of their parent elements. You probably want to assign the width to the parent class, i.e. .col-md-4 or find some other way to resize the container.
Did you try adding col-xs-4 to them?
<div class="col-md-4 col-xs-4 widget1">...</div>
<div class="col-md-4 col-xs-4 widget2">...</div>
<div class="col-md-4 col-xs-4 widget3">...</div>
I have some divs set up to display images as links with and im trying to set up a standardized way to place an image in the div and at LEAST have it stretch the image to fit for me. I would really like to be able to adjust the cropping to fit in the square, but i realize that may be a bit tricky.
Heres what i currently have:
(tried to post image but dont have the rep just yet so heres a link http://i.stack.imgur.com/nNRD9.jpg
How would i go about doing this? I thought that using
style="height:100%; width:100%"
would work, but it still didnt stretch the photo to the maximum height, possibly due to how i have things layed out.
In the photo above, each photo is set up like:
<div class="4u 12u$(mobile)">
<article class="item">
<img src="images/resume.jpg" title="My Resume" alt="My Resume" />
<header>
<h3>My Resume</h3>
</header>
Thanks!!
A fiddle (http://jsfiddle.net/), and a pen (http://codepen.io/), are great ways to present what you are trying to do for other people. You can put your HTML, CSS, and JS, and it will render it for you, for free. Check them out.
You can use display: table, display: table-row, and display: table-cell on the div container, <div>, and the <article> respectively.
Another great solution is using a flexbox, Css Tricks have a great guide on it.
If you are interested in grids and frameworks I will suggest that you check out “Foundation”, or “Bootstrap” or the myriad of other HTML5 frameworks.
Put your code in a fiddle, so we will be able to help you out with your code. Until then, here is a suggestion
a{width:auto; display:inline-block; min-height:100px; overflow:hidden;}
img{width:100%;}
Overflow:hidden; will hide the parts of the <img/> that lies outside the bounds of <a>
Specifying width and height to .item class might fix it.
Please post the css style you have done so far so that we can look into it and suggest changes to achieve your requirement.
http://i.stack.imgur.com/mDS5o.png
I basically would like to add empty space either side of that nav bar so it follows all the way to the end of the screen. If it was possible being able to do so it would fit any screen size would be great! I've been coding for two days now learning from codeacademy so i dont have the full knowledge of how to do little things like this.
Your help is much appreciated.
(the empty space either side of the nav bar should match the nav bars props, i.e opacity, size)
Also I would much rather if someone could explain to me how its done as I have noticed alot of the questions asked here are answered with the exact code required and a copy + paste is all that's needed.
this is what im working with
http://cssmenumaker.com/builder/459273
To clarify what pconline's code is doing, if you create a div at 100%, then separate divs for the nav, you can expand the outer div to 100% for full width, then style and align the nav separately.
i hope this example can help you
<div class="container">
<div class="nav">
<label>foo1</label><label>foo2</label><label>foo3</label>
</div>
<div>
CSS
.container{width:300px;height:50px; background-color:blue}
.nav{width:120px; height:50px; background-color:green; margin:0 auto;}
.nav label{line-height:50px;}
http://jsfiddle.net/r3D4b/
I've read several posts about this issue but haven't found a solution. My website uses a parallax scrolling effect and I need to use a div with a background instead of an image. Is there a method for making the background go full screen?
I encountered the same problem myself, my solution would be to set your divs up like so:
<div id="blah">
<div class="content">
Blah content
</div>
</div>
Then give each div your desired background, give it a width: 100%; and make it display: inline-block; Because the div is inline-block, if the user has their browser window really small and your page requires a x-scroll bar, then the background will stretch the whole width of the page. If instead you leave it as display: block; when the user x-scrolls the background colour will disappear for anything that is not initially in view.
As for your content class thats where you set up your grid for your content, using 960gs or whatever you fancy, and as its a class you can apply it to every section/div.
Working (in progress) example here: http://residencyradio.com
I tryed add
-webkit-backface-visibility: hidden;
And it look, like lags has gone.
I was using some code from this (http://webdesignerwall.com/tutorials/css-elastic-videos) site to have a nice "elastic" video container that would size with my responsive design.
I'm looking to do something similar but with images. So it resizes with the design, keeping the proportions and allow it to expand a bit outside it's current containers' margins.
I think I need to wrap the image in a div and position that somehow but I just need some advice if anyone has done something similar to this. The exact dimensions/etc are not important, just the process behind it. Thanks!
Here's an image to what I'm looking to accomplish: http://i.stack.imgur.com/84KvA.gif
How about something like this:
img {
max-width: 110%;
margin: 0 -5%;
}
Just an update, I decided to break the image out from the content, I'll add fake classes to help explain what I did...
<div class='no-longer-padded-post-element'>
<img src="now-can-span-full-width.jpg" />
<div class='content-with-padding'>
title
content
meta
etc.
</div>
</div>