On this page:(I just set a red and green border to make it more clear)
I have a picture of a book, which need to be in the left side where the black border is:
I have tried to build up the banner with the code below. But I cannot figure out how I can set a div tag that would fit the left side where the black border is.
Does anybody have an advice on how I could do that?. The code there is until now is this:
<div class="top-area" style="border: 4px solid red;">
<div class="container" style="border: 4px solid green;">
#if (!string.IsNullOrEmpty(headerText))
{
if (pageAlias == "Blog")
{
<h1 class="header-xl center">
#Html.Raw(headerText)
</h1>
}
else
{
<p class="header-xl center">
#Html.Raw(headerText)
</p>
}
}
#if (CurrentPage.HasValue("imageTeaserText"))
{
<p class="sub-header center">
#Html.Raw(CurrentPage.imageTeaserText)
</p>
}
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 main-content" id="main-content">
<div class="row">
<div class="col-lg-12">
#CurrentPage.GetGridHtml("inovoGrid")
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here's an example on plunkr using the bootstrap columns to keep elements aligned on either side of your title. Bootstrap aligns its grid based on 12 columns. I've only added support for small density screens via col-sm-x, you should experiment with the other densities.
Related
I created some Cards using bootstrap, html and css. Unfortunately, when I change the size of the screen the cards do not adjust accordingly.
This is how they look right now before changing the size.
When I go to inspect and switch it to ipad, it looks like this:
I tried using a media query in my css folder to solve this, but no luck. Can someone tell me what I am doing wrong? EDIT: Ideally, I would like to have one card on top of another when changing the screen size. I would also like to have the spacing in between the cards as well.
<div class="col-md-4">
<div class="ScoreCard">
<div>
<h3 style="background-color:#item.TitleColor"> #item.ReportName - #item.TitleColor </h3>
</div>
<div class="col-lg-4">
<div style="font-weight:bold; margin-top:35px;">
<h1>GrossAmountDue</h1>
</div>
</div>
<div class="col-lg-2" style="margin-top:35px;">
if (Flag == 1)
{
<i class="fas fa-circle" style="font-size:30px; color:red; margin-left:15px;"></i>
}
</div>
<div class="col-lg-6">
<div>
<p style="font-size:20px; margin-left: 25px;">Audited </p>
<p style="font-size:20px; margin-left: 25px;">Packages: Will go here</p>
<p style="font-size:20px; margin-left: 25px;">Transactions will go here</p>
<p style="font-size:20px;"Icon will go here</p>
</div>
</div>
<div class="row">
<div class="col-lg-12" style="margin-top: 5px;">
<p style="margin-left:17px;">Text Here</p>
</div>
</div>
</div>
</div>
//CSS
<style>
.ScoreCard {
background-color: orange;
width: 500px;
min-height: 200px;
border: 15px black;
}
##media screen and (max-width: 100px){
.col{
width: 50%;
}
}
</style>
You have to wrap your cols in a row like this:
<div class="row">
<div class="col-md-12 col-lg-4">
<div class="card">...</div>
</div>
<div class="col-md-12 col-lg-4">
<div class="card">...</div>
</div>
<div class="col-md-12 col-lg-4">
<div class="card">...</div>
</div>
</div>
In this way, when you have a screen equal or less of md, contents of cols goes one on top of another, but when screen is lg or higher, you have 3 cols in a row.
INFO
In your media query you are changing the col class, when instead you are using col-md-4
I am struggling a lot with the responsive part of a page.
When I scale down to around 991 px, the book, and the headline text is flying around. Originally I used sm-hidden and sm-visible, because I would like that the text headline came first, and afterwords the picture of the book.
But how can I solve this? I am starting to run low on ideas how to make it fit, so the book is not going under the background picture when I reach around the 991 px. I would like that the headline and book img stayed inside the background picture.
I hope somebody can through the developer console see what is wrong here. My code until now looks like this:
<div class="background-image" #Html.Raw(topImageStyling)>
<div>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 img logo img-responsive">
<img src="https://www.site.dk/img/inovo-logo-white-small.png">
</div>
</div>
</div>
<div class="book container col-sm-12 hidden-sm hidden-xs col-md-3 col-lg-4">
<img src="https://www.site.dk/img/landingpages/.png">
</div>
<div class="container col-sm-12 col-md-9 col-lg-8">
#if (!string.IsNullOrEmpty(headerText))
{
if (pageAlias == "Blog")
{
<h1 class="header-xl center">
#Html.Raw(headerText)
</h1>
}
else
{
<p class="header-xl">
#Html.Raw(headerText)
</p>
}
}
#if (CurrentPage.HasValue("imageTeaserText"))
{
<p class="sub-header center">
#Html.Raw(CurrentPage.imageTeaserText)
</p>
}
</div>
<div class="col-sm-12 visible-sm visible-xs">
<img src="https://www.site.dk/img/landingpages/g.png">
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 main-content" id="main-content">
<div class="row">
<div class="col-lg-12">
#CurrentPage.GetGridHtml("site")
</div>
</div>
</div>
</div>
</div>
</div>
</div>
So I think I might have found the solution to your problem. On line 3044 of your CSS, there is the img element. I simply added the following to your code:
img {
display: block;
max-width: 100%;
height: auto;
position: relative;
z-index: 1030;}
It works for screen sizes larger than the 960px range and acts up a little from the 760px-440px range. I figured all you have to do now is add a media query for the corresponding viewport widths. To explain the solution is simple. Within CSS all elements that are layered within the HTML document have a z-index that determines there position in the stack. From there, in order to get the z-index to respond, I set the position to relative for that img element. The z-index property only works when the position is set to something other than static which is the default value. I hope this helps! Let me know if you have any questions.
I'm using Twitter's Bootstrap to design a website but i'm finding problems to control the vertical spacing of the website on mobile view because the elements are either sticking or too far apart when switched to mobile view.
is there anything that boostrap offers to increase or decrease the spacing, such as col-xx-offset-# for the horizontal gapping?
Or is there any other standard method to control this?
Code Example with inline style:
https://jsfiddle.net/6e513k5o/
<div class="container">
<div>
<div style="color: #555;border: 3px solid #ed008c;border-radius: 4px; padding:10px" class="col-md-offset-2 col-md-3">
<img class="img-responsive" style="margin:auto" src="http://placehold.it/231x213">
</div>
<div style="color: #555;border: 3px solid #ed008c;border-radius: 4px; padding:10px;margin-top:100px;margin-left:-3px;" class="col-md-3">
<div style="text-align:center">
<label>
Mr. John Doe
</label>
<br>
<p>
CEO
</p>
</div>
</div>
</div>
</div>
use <div class="row"> after <div class="container">
The good thing about bootstrap is that you can customize it as per your need.
Please add a custom margin for columns. Please find the updated fiddle.
https://jsfiddle.net/6e513k5o/6/
HTML
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-3 custom-class">
<img class="img-responsive" style="margin:auto" src="http://placehold.it/231x213">
</div>
<div class="col-md-3 custom-class">
<div style="text-align:center">
<label>
Mr. John Doe
</label>
<br>
<p>
CEO
</p>
</div>
</div>
</div>
</div>
CSS
.custom-class {
color: #555;
border: 3px solid #ed008c;
border-radius: 4px;
padding: 10px;
margin-bottom: 10px;
}
I'm using Bootstrap and I'm trying to fix the border. It will only appear above the text because of the pull right and left. What should I do to make it appear over the whole line?
HTML
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="pull-left">
<footer class="footer"><p>text1</p></footer>
</div>
</div>
<div class="col-md-6">
<div class="pull-right">
<footer class="footer"><p>text2</p></footer>
</div>
</div>
</div>
</div>
CSS
.footer {
padding-top: 19px;
margin-top: 7px;
color: #777;
border-top: 1px solid #e5e5e5;
}
You can't without changing your markup.
It makes more sense to give your footer row another fitting class: footer-row and apply styles to that instead:
HTML
<div class="container">
<div class="row footer-row">
<div class="col-md-6">
<div class="pull-left">
<footer class="footer"><p>text1</p></footer>
</div>
</div>
<div class="col-md-6">
<div class="pull-right">
<footer class="footer"><p>text2</p></footer>
</div>
</div>
</div>
</div>
CSS
.footer-row {
padding-top: 19px;
margin-top: 7px;
color: #777;
border-top: 1px solid #e5e5e5;
}
Bootply
Change your code like this:
<footer class="container">
<div class="row">
<div class="col-md-6">
<div class="pull-left">
<p>text1</p>
</div>
</div>
<div class="col-md-6">
<div class="pull-right">
<p>text2</p>
</div>
</div>
</div>
</footer>
Basically, you get rid of your double footer element and apply the container class to the footer element so it expands the whole width and remains as a single footer when resized
This solves your issue AND is semantically correct since you won't have 2 footer elements
I have added a Bootply so you can see how it works
If indeed you want text 1 and text two to take up half of the div each, try putting the footer tag as a whole across all columns as one element, then text one and text 2 nested in two divs with columns of 6.
I am using uikit 2.8.0. I am trying to create a two column grid structure. But the two columns don't appear adjacent to each other. The second column slides down the first one.
<body>
<div class="uk-container uk-container-center uk-margin-large-bottom">
<nav var code.......>
<div class="uk-grid" data-uk-grid-margin>
<div class="uk-width-medium-1-1 uk-text-center">
<h1>Tell us more about yourself</h1>
</div>
</div>
<div class="uk-grid" data-uk-grid-match="{target:'.equal-height'}">
<div class="uk-width-large-6-10" style="margin: 0 20% 0 20%;">
<div class="uk-width-7-10 uk-width-small-1-1 uk-width-medium-7-10 uk-width-large-7-10" style="border: 1px solid #B4B3B3;height:100px;">
</div>
<div class="uk-width-3-10 uk-width-small-1-1 uk-width-medium-3-10 uk-width-large-3-10" style="border: 1px solid #B4B3B3;height:100px;">
</div>
</div>
</div>
</div>
I tried many options. But come what may, the second grid would not stay side by side to the first one.
How can I fix this? Any tool that I can use to debug the layout? I am using chrome developer tools without any success.
You needed to add class ".uk-grid" to the div with styled margin (uk-width-large-6-10), as you want to make a grid inside that element.
Plus this, the "Target" element should target to something existing, best to "uk-panel" placed inside the element with "uk-width".
<div class="uk-container uk-container-center uk-margin-large-bottom">
<nav var code.......>
<div class="uk-grid" data-uk-grid-margin>
<div class="uk-width-medium-1-1 uk-text-center">
<h1>Tell us more about yourself</h1>
</div>
</div>
<div class="uk-grid">
<div class="uk-width-large-6-10 uk-grid" style="margin: 0 20% 0 20%;" data-uk-grid-match="{target:'.uk-panel'}">
<div class="uk-width-7-10 uk-width-small-1-1 uk-width-medium-7-10 uk-width-large-7-10" style="background-color:green; height:100px;">
<div class="uk-panel"> </div>
</div>
<div class="uk-width-3-10 uk-width-small-1-1 uk-width-medium-3-10 uk-width-large-3-10" style="background-color:red; height:100px;">
<div class="uk-panel"> </div>
</div>
</div>
</div>