How can I make the yellow section fullwidth? I tried section and div container fluid within bootstrap and no luck. I think there are fixed dimensions in the parent css that I can’t override. I just want to make a responsive div section fullwidth so I can use a background color or image background. Thanks in advance.
Page in question:
http://dev.dragonscaletech.com/our-story/
<div class="container" style="background-color: yellow;">
<div class="row">
<div class="col-12 text-center">
<h2>Reaching the Root of the problem..</h2>
<h4>Scrubbing your back daily has always been so uncomfortable &
unrealistic, until now!</h4>
<p>The fact that it allowed easy & hands-free access to the absolute hardest to reach area of the human body, meant that we needed to make it count & go after the root of the problem.</p>
<p>We constantly neglect our back when we shower.</p>
<p>Every other solution to this widespread hygiene shortcoming requires a full range of arm & body mobility, which frankly, not everyone has.</p>
<p>Something as common as having sore muscles from last night's work out or even having too much muscle, can limit you from using any of these "alternatives-on-a-stick". Age, injury & disability can make it impossible.</p>
<p>Once we understood the core issue, we got to work.</p>
</div>
Bootstrap container does have 15px padding and row have - 15px margin. So either add class row to your section or give - 15px margin to your yellow section. Hope that will work or try question with code next time for quick response.
Found this code after a ton of searching on google. Fixed my issue.
.row-full{
width: 100vw;
position: relative;
margin-left: -50vw;
height: 100px;
margin-top: 100px;
left: 50%;
}
https://coderwall.com/p/hkgamw/creating-full-width-100-container-inside-fixed-width-container
Related
I know this question must sound familiar, and I can see loads of people asking similar questions but none of the answers are working for me. Everyone has a fairly specific need. I want to understand the basics and I can work out the rest.
I have a simple angular/bootstrap web page. I have made a carousel component and I want to ensure the user always sees the entire image. I have seen lots of answers which suggest img-fluid, max-with, max-height etc., but nothing's working for me. It's sort-of working for landscape images but not for portrait images. I need it to always show the whole image regardless.
Here is the basic app component:
<app-nav-menu ></app-nav-menu>
<div style="padding:10px">
<router-outlet></router-outlet>
</div>
The router-outlet goes to this "about-us" component:
<div class="row">
<div class="col">
<app-carousel [slides]="slides"></app-carousel>
</div>
</div>
And the carousel component looks like this:
<div class="container">
<div class="row">
<div class="col">
<div>
<img [src]="slide.src">
<p style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
{{slide.text}}
</p>
</div>
</div>
</div>
</div>
As you can see it's really simple. Right now there is no styling other than the little bit in the p tag which is to center the text in the image. This is not working properly now, because I think I've lost the container whilst trying out different solutions. I don't like CSS because I'm not used to them and I like to see the styles where they belong so I can understand better. But feel free to suggest a CSS solution if necessary.
So the question is simple: how can I make the image always fit the screen and not spill downwards?
Thanks
Did you try the object-fit property?
object-fit: cover;
If your image aspect ration is good, it shows the entire image.
object-fit: contain:
This shows the entire image, but if the aspect ratio is not good, it shows blank spaces around the image.
Thanks SureN.
I tried both of these but they didn't work. Perhaps they would do if I knew how to use them better.
In the end the following more or less worked for me, in the img tag:
style="max-width: 100%; max-height: 100vh; display: block; margin-left: auto; margin-right: auto;"
It's not perfect but it'll do for now!
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 3 years ago.
Improve this question
image
this is my first post here and I'm trying to figure out how I can do something like that
thanks in advance
I would use flexbox in CSS. once you lean this it will be a tool you use a lot for this type of thing. when you use flexbox there is a container element. i would use a div. see my example.
<!--HTML-->
<html>
<div id="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</html>
the divs that are "class" of "box" are the no1 and no2 paragraphs. in CSS use:
/*CSS*/
#container {
display: flex;
flex-direction: row;
}
you'll just need to format the class of box which will format each of the elements in that class (4 in my example above)
use this cheat sheet and you'll be a pro at this in no time.
https://www.steveaolsen.com/docs/FlexboxCheatsheet.pdf
also, view the page source you want to copy, it will all be there for you to see.
good luck
In addition to what sao said, a more basic way would be using display's inline or inline-block properties:
.box {
display: inline-block;
}
<div>
<div class="box">X</div>
<div class="box">X</div>
<div class="box">X</div>
</div>
It should do the trick, but I agree that using flex is a better and more advanced way to do so.
Also, I'd recommend searching a bit more for your question before asking it, I'm sure this question has been asked before.
Best of luck mate!
you've got many options depending on wether or not you intend for it to be only text, images .. and how adaptable you want it to be in the future.
here is a simple way that doesn't require advanced CSS:
.container { /*attributes of "div" weating the "container" class*/
display: flex;
width: 500px; /*make it 500pixels wide*/
}
.box {
width: 50%; /*all "box" will have a width of 50% it's parent (container here)*/
padding: 10px; /*give some cushion on the sides*/
}
.box:first-child { /*select only the first "box", very powerful*/
border-right: 1px solid red; /*right border to delimit*/
}
<div class="container"> <!--wide container in which both boxes go in-->
<div class="box"><!--1st box-->
<p>Your first text goes here and it goes on and on and on and on and on and forever....</p><!--1st text-->
</div><!--close 1st box-->
<div class="box"><!--2nd blox-->
<p>Your second text goes here and it goes on and on and on and on and on and forever....</p><!--2nd text-->
</div><!--close 2nd box-->
</div><!--close wide container box-->
The possibilities from here are endless. Visit a trusted site on HTML/CSS/JS coding to get started. I'm personally keen on Mozilla
Your most useful tool will be the "inspector", on any modern browser today you have the possibility to change CSS code and play around, discover what works and what doesn't. It doesn't affect anyone but you, on the page you're visiting, for example :
I used Flex in the example, but it's only one of the many options. With CSS there are often more than 2 ways to produce 1 result. Always go for the one with less code and less specific (more open ended to future changes)
Now hope your curiosity is tickled, get out there, learn & code !
I'm trying to figure out how I can do something like that
You have multiple options. From approximate worst to approximate best:
HTML tables (https://www.w3schools.com/html/html_tables.asp)
CSS absolute positioning (https://css3-tutorial.net/positioning/absolute/)
CSS tables (https://colintoh.com/blog/display-table-anti-hero)
CSS floats (https://www.w3schools.com/css/css_float.asp)
CSS Columns (https://www.w3schools.com/css/css3_multiple_columns.asp)
CSS Flexbox (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
CSS Grid (https://css-tricks.com/snippets/css/complete-guide-grid/)
I'm very new to css and html, and realize this might be a silly mistake...
Code Pen Demo
I don't see a top margin anywhere (using different bootstrap sources and building from them) but no matter how much I dissect the code, I still can't find the problem.
<div id="fh5co-products" data-section="products">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 fh5co-section-heading text-center">
<h2 class="fh5co-lead animate-single product-animate-1">innovating you</h2>
<p class="fh5co-sub animate-single product-animate-2">Your buyers are constantly evolving, and it can be hard to keep up. That's where we come in. </br>By uncovering the latest trends and best-in-class technologies, we work to ensure that you provide a selling experience that exceeds your buyers' expectations.</p>
Please add this css in your code
.jumbotron {
margin-bottom: 0;
}
Because the first element with a child div class="jumbotron" has a property margin-bottom with a value of 30px
in your CSS
.jumbotron {
margin-bottom: 0; // or use margin-bottom: 0 !important if this not work
}
When I try to make an HTML background color fill for a div, it ends up with a huge amount of extra space at the bottom - I want to make a sort of header, but it becomes really wide. Can someone help me with this?
My HTML is
<div class="header">
<h1>Welcome to My Site</h1>
</div>
My CSS is
div.header{
background-color:grey;
}
Thanks!
I would recommend adding width, height, and margin to your code. You can experiment with your code with a website like codepen.io! Below is a link to an example of what I'm talking about.
https://codepen.io/wykydtronik/pen/VpEGer
div.header{
background-color:grey;
width: 350px;
height: 150px;
margin: 0 auto;
}
If you look at the CSS code you will see I set a width of 350px, and height of 150px. I also added a margin: 0 auto; to make the header div to be center. It's a neat trick that isn't intuitive until you've seen it a few times.
Let me know if this helps, good luck!
I advise you to use bootstrap, there is lots of community support and documentation and you can even override colors and styles for yourself.
Bootstrap well class could work for you.
<div class="well">
Look, I'm in a well!
</div>
Or the jumbotron for bigger impact.
<div class="jumbotron">
<h1>Jumbotron</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
I want to incorporate an image that sits on top of an existing image (and maybe straddles two different divs. In general, I would just like to see what general html structure you'd suggest -- and any CSS rules I should include. I've spent hours trying to replicate the structure I wanted -- but after inspecting elements and trying to de-construct and re-construct I was unable to produce anything close to what I wanted.
Also, in the example provided below -- I noticed the overlapping image was placed inside a span tag. Any idea why? If you could just roughly describe how you'd approach this kind of design -- that would be awesome!
This is a pretty neat effect. This is one way out of multiple you can do.
The trick is to have a fixed height on your div with background, and inside it, another div that contains the image.
I've tried to keep height/widths pretty small so you can check them correctly on the embedded snippet. I've tried to keep styles as minimal as possible to recreate what you asked for.
Let me know if something like this does the job.
.first-image{
background: #eee;
height: 250px;
}
.container{
width: 95%;
margin: 0 auto;
max-width: 400px;
}
.container--padding{
padding: 1rem 0;
}
.second-image{
margin: 2rem auto;
}
<header>
<div class="first-image">
<div class="container container--padding">
<h2>I'm the cool title headline.</h2>
<button>Download</button>
</div>
<div class="second-image">
<div class="container">
<img src="http://placehold.it/400x190" alt="placeholder" />
</div>
</div>
</div>
</header>
In the example you're referring to, the images are not <img /> tags but <div /> overlapping on top of each other. Both of these <div /> have a background image.
There are multiple solutions to make 2 <div /> overlaps, you could use absolute positioning, float, negative margins, having the background in a parent <div /> with a height greater than the height of the background image, etc.
For example, using negative margins, if I have 2 <div /> following each other like:
<div class="bg1"></div>
<div class="bg2"></div>
I could simply add a negative top margin to the second one to make it appears on top of the first one to give an illusion of overlapping like:
.bg2 {
margin-top: -40px;
}
You can check an example using negative margin on this JSFiddle.