So check out the "About Us" and "Contact Us" pages here.
I'm having some difficulty in getting my DIV containers to align properly. I've never used DIV containers - last time I made a website it was based on tables and used Golive!
Anyway, the question should be fairly obvious - I want a 250x250 image on the left with the words to the right of the image and wrapping down below it (x3). The whole lot should be centred in the middle of the page with a max width of 1170 px. I just can't work out where it's gone wrong.
Likewise on the Contact Us page my 3 DIV containers are aligned vertically rather than across the screen taking up 33% each. All looks great in Dreamweaver live view but doesn't work in Chrome once uploaded.
I bet it's something simple but I really have no clue! I'll be super grateful if someone can point me in the right direction.
The problem is here in the below line of HTML
the div corresponding to Aviation & Automotive
<div class="col-xs-6 col-sm-6 col-md-3 templatemo_col12 templatemo_margintop10">
Replace that entire div using this
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3 templatemo_col12 templatemo_margintop10">
<div class="item project-post">
<div class="templatemo_about_box">
<div class="square_coner">
<span class="texts-a"><i class="fa fa-paper-plane"></i></span>
</div>
Aviation & Automotive
</div>
<div class="col-xs-6 col-sm-6 col-md-3 hover-box">
<div class="inner-hover-box">
<p>Repairs, maintenance and add-ons. We specialise in one-off projects.</p>
</div>
</div>
</div>
</div>
</div>
Related
I am trying to get a left sidebar to behave a bit nicer on smaller width displays.
Here is the site:
https://guitar-dreams.com/guitar-lesson/triad-arpeggios-2-strings/20
On this page you see the left sidebar and if you make the browser window narrower and narrower you will see that there gets to be a point when the left side of the sidebar disappears a bit beyond the browser window edge.
Here is pic (notice left side; right side looks cut just because of how I made the screenshot):
Since the sidebar behaved normally before I added the sticky block, I thought maybe I could just use a container div, where the presence of the sticky element would automatically maintain a proper relative position along with the menu that is above the sticky element, but that didn't help.
Here is the HTML for the sidebar:
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 hidden-sm hidden-xs left-sidebar" style="text-align: center;">
<div class="menu block tile-default" id="sidebarmenu" style="border:0px;">
<img src="/img/sidebar-top.png" class="img-responsive" alt="sidebar image">
<div class="pad">
<ul class="nav nav-pills nav-stacked">
#include('partials/menu')
</ul>
</div>
<div style="background-color: white; height: 10px; border:0px"></div>
<div id="sidebar-container">
<div id="leftsidebar">
<h4 class="text-center">Register for Free Live Video Webinar!</h4>
<a href="https://zoom.us/webinar/register/WN_Pt9LgDTBR828OXIHOfTLPQ" class="thumbnail" target="_blank">
<br>
<h4 class="text-center">Triad Chords Everywhere!</h4>
<img class="img-responsive" src="/img/chordswebinargraphic.png" alt="..." width="300" height="309">
<div class="caption">
<p style="background-color: #c8d9fe ; padding: 4px;">Set out on a path to master chords on the guitar. Understanding triads is the key to learning more advanced chord concepts such as 7th chords, extended chords, altered chords, hybrid chords, chord substitution, and more.</p>
<p>When: 7 September, 1:00 PM</p>
<p>Duration: 90 Minutes</p>
</div>
<div class="countdown" id="timer">
<div id="days"></div>
<div id="hours"></div>
<div id="minutes"></div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
Maybe I just don't have the relationship among the divs set properly. Curious if there is some simple adjustment that solves the problem. I suspect this isn't so much a CSS issue as a div structure issue in my HTML, just not sure how to properly set the divs to achieve the desired result.
Thanks in advance, Brian
Update you md class on both divs.
Use col-md-4 for side bar and col-md-8 on main content parent div. Below is the code:
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-3 hidden-sm hidden-xs left-sidebar">
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-9">
There are "hidden-sm hidden-xs" classes on left side bar div in your html. These classes hide your div once the screen width is below a certain threshold.
For more info, please refer https://www.w3schools.com/bootstrap/bootstrap_ref_css_helpers.asp
I am trying to align the content to the existing container above, however I am unable to successfully commit this as the container is located in a row because I wanted the file directory div on the left which pushes the container to the right of course.
Assigning a position: fixed; to the file directory div would fix the issue however it would not maintain the responsive web design which Bootstrap offers with its superior system.
As you can see the content is not in the right spot.
I have tried numerous things in css however none of these didn't feel right. For now I have tried playing with the col system of Bootstrap for a bearable outcome. Furthermore the image I provided of the website is in fact the result of this piece of code in case one wonders whether the image corresponds to the code.
<div class="container"><h2><i class="fas fa-archive" style="color: darkgoldenrod"></i> Archive Register({{ $files_total }})</h2></div>
<div class="container-fluid">
<div class="row justify-content-between">
<div class="file-list col-lg-2">
<h3 class="ml-5"><i class="fas fa-file-alt" style="color: darkgoldenrod"></i> File list:</h3>
<div class="file-list ml-5">
<p>List</p>
</div>
</div>
<div class="content col-lg-9">
content
</div>
</div>
</div>
<div class="file-list col-lg-2">
change to
<div class="file-list col-lg-3">
your col need 1 more col as it is a 12-grid column.
matching it to the right column
<div class="content col-lg-9">
This would be because you are using a container for the heading, which is based on a fixed with of the screen, and container fluid which is the full width on the screen.
You could change the heading container to something like this to align it with your content column? (Presuming you are using Bootstrap 4)
<div class="container-fluid">
<div class="row">
<div class="col-lg-9 offset-lg-9">
<h2><i class="fas fa-archive" style="color: darkgoldenrod"></i> Archive Register({{ $files_total }})</h2>
</div>
</div>
</div>
I am a complete beginner and I am learning Bootstrap. I want to know how to determine which column system I need to use in my website. Suppose I have a row with 3 columns. Now I have 3 options.
Option 1:
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
Option 2:
<div class="row">
<div class="col-lg-4">
</div>
<div class="col-lg-4">
</div>
<div class="col-lg-4">
</div>
</div>
Option 3:
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
</div>
Now my question is, As I want my website to be responsive which class I need to apply. I want my website to render properly irrespective of device selected. I understood that they are meant for different devices. Does that mean, I need to write 3 different css style code (I doubt it). So, what shall I put in my code?
P.S: I saw this link SO LINK and I understood it. But still I am confused, what to put in my code? Shall I put sm,lg or md?
These define the width of the screen at which the layout will collapse. For example, in .col-md-, the layout will be horizontal until the screen width is less than 970px, at this point, the layout will collapse. However, if you use .col-lg-, the layout will be horizontal until the screen width is less than 1170px, then it will collapse.
Bootstrap has 4 breakpoints, .col-xs-, .col-sm-, .col-md- and .col-lg-. You should use these depending on the content of the div. The best way to become familiar is to play around with each one and notice that the layout collapses at different points for each one when you decrease the width of your window. So to answer the question, you should choose whichever one collapses correctly for the content of your div. Hope this helps.
For a more detailed guide on the bootstrap grid system, take at look at this: https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
I found it helpful to get a good understanding.
I generally use col-md prefix, so I guess your first option would work quite fine: col-md-4.
To add to the other suggestions you've received, remember that you can apply multiple Bootstrap column classes to the same div.
For example say you wanted 3 equal width columns on a wide viewport. Then as the viewport narrows this changes to one full width header with two equal width columns below, and on smartphones all three divs are stacked vertically, then you might use something like
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12">column1
</div>
<div class="col-lg-4 col-md-6">colmun2
</div>
<div class="col-lg-4 col-md-6">column3
</div>
</div>
</div>
See this live https://codepen.io/panchroma/pen/EwVwpw
Or you might want to change the relative widths of your 3 columns at different viewports
<div class="row">
<div class="col-lg-6 col-md-4">
</div>
<div class="col-lg-3 col-md-4">
</div>
<div class="col-lg-3 col-md-4">
</div>
</div>
Or you might want to hide one of the columns at narrower viewports
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4 hidden-sm hidden-xs">
</div>
</div>
The important thing is that you can mix and match your classes to achieve the responsive behaviour that you need.
Once you get the hang of the grid sizing options you might also want to check out how to reorder columns. What often happens is that you need to have a different column order on desktop and mobile, and there will probably be times when you want to offset columns as well.
Good luck!
I have the following HTML code:
<div class="col-md-3 block">
<div class="col-md-4 photo">
<a target="_blank" href="https://www.facebook.com/app_scoped_user_id/1282701351808739/"><img src=""></a></div>
<div class="col-md-8"><h4><span style="font-weight: bold;">Gracie Huff</span></h4><p class="review-comment" style="line-height: 1.6;"><span>Oh my goodness! Your work is so precious and beautiful!!! I love what you do and I hope you continue to keep up the fabulous work!!! ❤❤</span></p>
Problem is that block col-md-4 has property float:left.
If text in block .col-md-8 is so long it comes to under block col-md-4 photo.
Sample here
So, how to fix this?
As solution I can set fixed height for element: div.photo
When using bootstrap col's you have space for a total of 12 inside a row.
Please take a look at the grid documentation. http://getbootstrap.com/css/#grid
So in your example 3 + 4 + 8 = 15 . So that's 3 too many. In my code example below i divided the page into 3 even columns. So you do 12/3 = 4 so you give each class col-md-4 . If you don't want even columns you can play with the numbers at the end. But never go above 12 or they will not fit into a single row.
Also the basic structure involves a container and a row.
If you want the container to be full-width you can add container-fluid instead of container to your top-level div.
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<a target="_blank" href="https://www.facebook.com/app_scoped_user_id/739844199505120/"><img src="https://fb-s-b-a.akamaihd.net/h-ak-xpf1/v/t1.0-1/p50x50/14724409_686756244813916_4119560930105375585_n.jpg?oh=0d295e97d3818a2ba788015d38385376&oe=590D81DC&__gda__=1494163569_54508491e4fd3d1197960c466dfee235"></a>
</div>
<div class="col-md-4">
<h4 class="strong"><strong>Anastasia Michelle Archuleta</strong></h4>
</div>
<div class="col-md-4">
<p class="review-comment" style="line-height: 1.6;">
<span>I can't stop looking at these cute creatures! I'm so in love with all of them! I'm saving up for one, what one is going to be a very hard decision that's for sure!</span>
</p>
</div>
</div>
</div>
Here is my Bootstrap 3 jsFiddle, although you'll likely need to view it in full screen view in order to see it in all its glory.
As you can see, there are two TB3 "wells" called Herps and Derps. They are currently sitting on top of one another, and furthermore, they are wider than the navbar, jumbotron and footer wells.
I'd like these to both be next to each other on the same line/"row", and I'd like the two wells to be the same width of all the other contents. I'd also like to have a bit of padding (spacing) between the two wells so that they're not smushed right up next to each other.
My best attempt (from that jsFiddle above):
<div class="row">
<div class="span6">
<div class="well">Herps</div>
</div>
<div class="span6">
<div class="well">Derps</div>
</div>
</div>
...does not seem to be doing the trick. Any ideas where I'm going awry?
You need to use the col-x-y css styles for your wells for the appropriate screen size and columns. In this case, you could use col-sm-6 since you have two columns.
<div class="row">
<div class="col-sm-6">
<div class="well">Herps</div>
</div>
<div class="col-sm-6">
<div class="well">Derps</div>
</div>
</div>
JSFiddle
Bootstrap Grid System