Below is my code for the entire container that contains a row with a "span5 well" and a "span6".
If I make the 2nd a "span7", although they do add up to 12, the WELL causes the 2nd span to shift to next row. Even at desktop resolution. The Form only has a few inputs and I did not use text field labels, I used placeholders to take up less space. there are a few parts to this question.
How can I left align the form inside the well? right now it wants to go right, and also hangs off the well a bit.
Should I even use the "well" to hold the form, or should I just put a border around the "span5" and make the background color grey to resemble the "well" background ?
here is the code
<div class="container">
<div class="row">
<div class="span5 well" style="border-radius:10px">
<h3 style="text-align:center">Let us know how we can help</h3>
<hr>
<div><%= render "customers/form"%></div>
</div>
<div class="span6">
<div>
<%= image_tag 'Sprinkler2.png' %>
</div>
</div>
</div>
</div>
Related
I have a row class inside a col class using bootstrap 4 which looks perfect on desktop, but for mobile I want to force the row to be below it's parent row when the page is viewed on mobile. So technically I want to 'break out' of it's parent without changing the height of the parent. Here's an example of what I have currently on desktop:
And what I'm trying to achieve on mobile:
My code is just basic bootstrap with no additional CSS changes:
<div id="jumbo" class="row">
<div id="info" class="col-xl-6 col h-100">
<div class="row">
<div id="info-text" class="col offset-md-2">
<p class="display-4">Estate planning made easy</p>
<p>
Let’s get a clear plan in place for your money,<br>
property and other assets here and now.<br>
It’s never too early to protect what’s important<br>
to you and your family.
</p>
<p class="museo-sans-900">Get your free personalised report in just 20 minutes</p>
<button class="btn btn-brand-secondary">Start Now</button>
</div>
</div>
</div>
</div>
You can make two versions of the section. One like the first one and one like the second. Then put id=#desktop for the first and id=#mobile for the second . Then be sure to mark #desktop{display:none} for #media only screen and (max-width: (insert width of mobiles)), and #mobile{display: none} for min-width: (insert width of mobiles) . It s a long way, but if you don t find another easier way you can try this.
My mentor wants me to create a site based off a wireframe he sent, but I haven't been able to position the text on these "hero" images.
It seems like the text is kind of stuck in the right half of the container, which is weird because offsetting them should have shoved them over to the left. Unless, of course, I did it wrong.
I didn't do much to it and I'm confused, especially since I used an offset in the same document that's functioning properly. I tried using classes like justify-content-left, but they seemed to hit an invisible wall in the middle of the container.
<div class="p-2" id="navigationFilter">
<div class="container">
<div class="row">
<div class="col-lg-6 offset-lg-6">
<header class="pt-5">
<p>Enjoy peace of mind knowing that you can</p>
<h1>Quickly send for help and alert loved ones</h1>
<button class="btn btn-lg btn-primary" type="button">Get Started</button>
</header>
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
</div><!-- translucent-->
You need to remove the offset-lg-6 class.
Offset classes
Move columns to the right using .offset-md-* classes.
These classes increase the left margin of a column by * columns. For
example, .offset-md-4 moves .col-md-4 over four columns.
-- https://getbootstrap.com/docs/4.3/layout/grid/#offset-classes
I am editing a site to be 3 columns.
Here is example page, currently 2 columns:
https://courses.guitar-dreams.com/lessons/an-introduction-to-triads-and-their-inversions/
So what we have is a header, sidebar, content area, and footer. Seems pretty straightforward. But as I look at the HTML, the structure is so odd. Here is how this page is arranged:
<body>
<div class="learndash-wrapper">
<div class="ld-focus">
<!-- notice how it is starting out with sidebar even though we have 2 headers on top of each other... -->
<div class="ld-focus-sidebar">
<div class="ld-focus-sidebar-wrapper">
<div class="ld-course-navigation">
Here is sidebar navigation content
</div> <!--/.ld-course-navigation-->
</div> <!--/.ld-focus-sidebar-wrapper-->
</div> <!--/.ld-focus-sidebar-->
<!-- ok now the main content -->
<div class="ld-focus-main">
<!-- oh but wait, let's add header first! And namely the 2nd header! -->
<div class="ld-focus-header">
Here is the 2nd header
</div> <!--/.ld-focus-header-->
<!-- ok now that we added 2nd header, let's add main content! -->
<div class="ld-focus-content">
here is main content
</div> <!--/.ld-focus-content-->
</div> <!--/.ld-focus-main-->
</div> <!--/.ld-focus-->
<!--/.ld-learndash-wrapper-->
<!-- Oh wait, now that we are at end, let's add that first header now! -->
<div id="wpadminbar" class="">
The topmost header
</div>
</body>
You see what I mean? I am not a web design expert, but I tend to believe that layout of pages generally should follow similar principles to the document publishing world. That is, if your page starts with header, probably good idea for that to be the first design element that you add, and not the last, and moreover, that the design element, if possible, should be placed in the design environment in a way that has physical correspondence to the rendered document.
I am trying to add a right sidebar to make it a 3 column layout. I tried adding a wrapper div to <div class="ld-focus-main"> with display: flex and followed some of the approaches here:
http://geniuscarrier.com/2-columns-layout-with-flexbox/
<div class="ld-focus-main">
<div class="ld-focus-header">
</div> <!--/.ld-focus-header-->
<div class="mywrapper">
<div class="ld-focus-content">
here is main content
</div> <!--/.ld-focus-content-->
<div class="mysidebar">My sidebar</div>
</div>
</div> <!--/.ld-focus-main-->
Here I used (as inline styles)
.mywrapper {
display: flex;
align-items: center;
}
.ld-focus-content {
flex-grow:1
}
I didn't use properties on the right sidebar since in the example in the link above it suggested that if all is well with wrapper and left then right part will follow suit.
But above doesn't produce desired result. At bottom of page linked above you see my added divs and "My Sidebar". I think part of the problem is that the theme template uses such bizarre placement of divs and properties such that when I try to add that right column the underlying structure is not making it work as expected. Sort of like 2nd, 3rd order effects... as well as a Jenga game within a Jenga game.
I was thinking about just redoing the entire template, but at this point I would prefer to just add a sticky right sidebar without a ton of rework. That said, to me it seems the proper way to do such a layout, syntactically would be
<div class="mainwrapper">
<div class = "firstheader"></div>
<div class = "secondheader"></div>
<div class = "outercontentwrapper"></div>
<div class = "leftnavigation"></div>
<div class = "contentwrapper">
<div class = "maincontent"></div>
<div class = "rightsidebar"></div>
</div>
</div>
<div class = "footer"></div>
</div>
Just not sure all the specific properties such that the page would behave as is now, plus add a right sidebar.
So with all that, how would you go about adding that right column?
Thanks!
Brian
I have a template that gets all of the information generated from an external program. I am attempting to make this template a bit more modern and less 1992.
The page used to work with a table. It didn't look very nice so I am attempting to remove the table and just have everything on the screen fluid.
For the containers of the text I have used the bootstrap well class. The problem is that if one well is a bit longer then the other, it looks very odd. I need both of the <div class="well"> to be the height if the tallest one.
I have tried to do this with a lot of different CSS. I really don't want to have to go back to a table.
The code is below.
<div class="col-md-12">
<div class="col-md-6">
<div class="well">
<h3>Heading</h3>
Info
<br>
<br>
</div>
</div>
<div class="col-md-6">
<div class="well">
<h3>Heading</h3>
Info
<br>
<br>
</div>
</div>
</div>
Any help is appreciated.
so what you want is that the div's height must equal to the div that has a lot of data...
try using jquery.
var maxHeight = Math.max.apply(null, $(".well").map(function ()
{
return $(this).outerHeight();
}).get());
$('.well').height(maxHeight);
check this out:
https://jsfiddle.net/x3ehq57g/2/
This is my html right now. Whenever I view it on a smaller screen, rather than appearing on the far right like it should according to the col, it appears in the center of the screen.
<div class='row visible-xs-block'>
<div class='col-xs-2 col-xs-offset-10'>
<h3>DFA Rice Blog</h3>
<h4>Archive</h4>
</div>
</div>
I'm looking for a way to fix this issue
Like it was suggested by Shawn, it's best to just use pull right and set your column the length you want instead of trying to play with an offset. Something like this should work perfectly:
<div class='row visible-xs-block'>
<div class='col-xs-12'>
<div class="pull-right">
<h3>DFA Rice Blog</h3>
<h4>Archive</h4>
</div>
</div>
</div>