How do I adjust the size of cells in a row such that their heights are equal and all the characters fit in them? This is how a row looks like right now:
Note the small characters in the Japanese column. The cell is not tall enough to accommodate them. Also, the height of the cell in the English column is less than that of the one next to it.
I want the row to look like this:
The background looks like a long, green rectangle.
Here is my CSS and HTML code:
<style type='text/css'>
/* For small screen */
.row :nth-child(even){
background-color: #FFFFFF;
}
.row :nth-child(odd){
background-color: #D0E9C6;
}
/* For medium screen */
#media (min-width: 768px) {
.row :nth-child(4n), .row :nth-child(4n-1) {
background-color: #FFFFFF;
}
.row :nth-child(4n-2), .row :nth-child(4n-3) {
background-color: #D0E9C6;
}
}
/* For large screen */
#media (min-width: 992px) {
.row :nth-child(6n), .row :nth-child(6n-1), .row :nth-child(6n-2) {
background-color: #FFFFFF;
}
.row :nth-child(6n-3), .row :nth-child(6n-4), .row :nth-child(6n-5) {
background-color: #D0E9C6;
}
}
.header, h1 { background-color: #FFFFFF !important}
.en-buffer { margin-top: 10px; margin-right: 10px }
.jp-buffer { margin-top: 10px; margin-left: 10px }
</style>
</head>
<body>
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12 header jp-buffer"><h1>Japanese</h1></div><div class="col-md-4 col-sm-6 col-xs-12 header en-buffer"><h1>English</h1></div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12 japanese jp-buffer"><ruby lang="jp">カレー</ruby><ruby lang="jp">粉<rp>(</rp><rt>こ</rt><rp>)</rp>は</ruby><ruby lang="jp">家<rp>(</rp><rt>いえ</rt><rp>)</rp>にあるの?</ruby></div><div class="col-md-4 col-sm-6 col-xs-12 english en-buffer">Do you have curry powder at your house?</div>
</div>
I think that the problem was the classes .en-buffer and .jp-buffer
try using padding instead margin...
/* For small screen */
.row:nth-child(even) {
background-color: #FFFFFF;
}
.row:nth-child(odd) {
background-color: #D0E9C6;
}
/* For medium screen */
#media (min-width: 768px) {
.row:nth-child(4n),
.row:nth-child(4n-1) {
background-color: #FFFFFF;
}
.row:nth-child(4n-2),
.row:nth-child(4n-3) {
background-color: #D0E9C6;
}
}
/* For large screen */
#media (min-width: 992px) {
.row:nth-child(6n),
.row:nth-child(6n-1),
.row:nth-child(6n-2) {
background-color: #FFFFFF;
}
.row:nth-child(6n-3),
.row:nth-child(6n-4),
.row:nth-child(6n-5) {
background-color: #D0E9C6;
}
}
.header,
h1 {
background-color: #FFFFFF !important
}
.en-buffer {
padding: 10px;
}
.jp-buffer {
padding: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-6 header ">
<h1>Japanese</h1>
</div>
<div class="col-md-4 col-sm-6 col-xs-6 header ">
<h1>English</h1>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-6 jp-buffer ">
<ruby lang="jp">カレー</ruby>
<ruby lang="jp">粉
<rp>(</rp>
<rt>こ</rt>
<rp>)</rp>は</ruby>
<ruby lang="jp">家
<rp>(</rp>
<rt>いえ</rt>
<rp>)</rp>にあるの?</ruby>
</div>
<div class="col-md-4 col-sm-6 col-xs-6 en-buffer">Do you have curry powder at your house?</div>
</div>
Related
I'm using Foundation and I would like to create this grid on small devices:
And make it look like this on desktop:
You can see that "Actions" and "Sideinfo" are now in the side nav.
That's what I have so far:
.actions { background-color: #00FFF7; height: 5rem !important; padding: .5rem; }
.about { background-color: #F0A202; height: 10rem !important; padding: .5rem; }
.side { background-color: #00FFF7; height: 7rem !important; padding: .5rem; }
.copyright { background-color: #F0A202; height: 12rem !important; padding: .5rem; }
#media only screen and (min-width: 640px) {
.actions {
order: 3;
}
.about {
order: 1;
}
.side {
order: 4;
}
.copyright {
order: 2;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites#6.7.4/dist/css/foundation.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites#6.7.4/dist/css/foundation-prototype.min.css" />
<div class="grid-container padding-top-1">
<div class="grid-x grid-margin-x grid-margin-y align-top">
<div class="cell small-12 medium-4 large-3 float-left actions">
<h1>Actions</h1>
</div>
<div class="cell small-12 medium-8 large-9 float-right about">
<h1>About this item</h1>
</div>
<div class="cell small-12 medium-4 large-3 float-left side">
<h1>Sideinfo</h1>
</div>
<div class="cell small-12 medium-8 large-9 float-right copyright">
<h1>Copyright</h1>
</div>
</div>
</div>
You can see it here as well: https://codepen.io/DoctorRobot/pen/WNMJOMq
You can see the order doesn't look to be the right solution. I tried to use float-right and float-left but it doesn't look to match what I want. Any ideas and suggestions?
order would only be ideal for the layout when changing the order for mobile devices. I am not an expert on Foundation Flexbox Utilities by any means but this should work nicely for you. I essentially grouped the div's in twos under their respective .cell .small-12 etc. I also removed the float's as they don't work great with flex.
I used your existing media queries to get your desired margin on desktop and mobile. I'm not sure if there is a way to specify margin or gap using foundation but I would use them if you are able.
.actions {
background-color: #00FFF7;
height: 5rem !important;
padding: .5rem;
}
.about {
background-color: #F0A202;
height: 10rem !important;
padding: .5rem;
}
.side {
background-color: #F18805;
height: 7rem !important;
padding: .5rem;
}
.copyright {
background-color: #D95D39;
height: 12rem !important;
padding: .5rem;
}
#media only screen and (max-width: 600px) {
.about,
.actions,
.copyright,
.side {
margin-bottom: 1rem;
}
.actions {
order: 1;
}
.about {
order: 2;
}
.side {
order: 3;
}
.copyright {
order: 4;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites#6.7.4/dist/css/foundation.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites#6.7.4/dist/css/foundation-prototype.min.css" />
<div class="grid-container padding-top-1">
<div class="grid-x grid-margin-x grid-margin-y align-top">
<div class="cell small-12 medium-8 large-9 about">
<h1>About this item</h1>
</div>
<div class="cell small-12 medium-4 large-3 actions">
<h1>Actions</h1>
</div>
<div class="cell small-12 medium-8 large-9 copyright">
<h1>Copyright</h1>
</div>
<div class="cell small-12 medium-4 large-3 side">
<h1>Sideinfo</h1>
</div>
</div>
</div>
I have used bootstrap for the layout, however when you view this page on a mobile device the overlaid text seems to hide most of the image, I have tried a couple of different things like media queries.
I have also added in some media queries for the website in general, which has helped the text to stay in the box but still is covering a large majority of the image.
/* CONTACT Page */
.somesection {
margin-top: 50px!important;
}
body {
font-size: 16px;
font-family: raleway;
}
img {
max-width: 100%;
}
h3 {
font-size: 18px;
}
.overlay-text {
font-size: 16px;
width: 50%;
/*important*/
bottom: 21vw;
/*important*/
padding: 25px;
background: #f7f7f7;
}
/*responsive */
#media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
<div class="page-content inset">
<div class="row">
<div class="col-md-12">
<div class="row">
<hr>
<div class="container somesection">
<div class="row col-xs-8">
<img align="left" src="images/contact.jpg">
</div>
<div class="col-xs-3 col-sm-offset-4 overlay-text">
<h1>CONTACT STEPHANIE</h1>
<br>
<p>If you have any questions or any design requests please email me at:</p>
<h3><i>EMAIL</i></h3>
</div>
</div>
/* CONTACT Page */
.somesection {
margin-top: 50px!important;
}
body {
font-size: 16px;
font-family: raleway;
}
img {
max-width: 100%;
}
h3 {
font-size: 18px;
}
<div class="page-content inset">
<hr>
<div class="container somesection">
<div class="row">
<div class="col-md-6 col-xs-8 col-sm-8">
<img align="left" src="images/contact.jpg">
</div>
<div class="col-md-6 col-sm-3 col-xs-3">
<h1>CONTACT STEPHANIE</h1>
<br>
<p>If you have any questions or any design requests please email me at:</p>
<h3><i>EMAIL</i></h3>
</div>
</div>
Try this will solve your problem!
When I resize the browser window to under 768 px the boxes is getting different padding on the sides of my column boxes: See the example here.
I tried to set a media query with something like this, but I am aware of that it is not the correct way to do it at all:
#media only screen and (max-width: 768px) {
.small-padding-left {
padding-left: 7.5px;
}
.col-sm-8 {
padding-right: 7.5px;
}
}
Does anybody knows a good way how I can achieve this? This is my code so far:
/* Global CSS*/
.row > div{
margin-bottom: 15px;
}
.content{
background: #b4bac0;
min-height: 300px;
}
/* When there is 2 columns on top of eachother */
.sidebar{
background: #b4bac0;
min-height: 300px;
}
.sidebar-top{
min-height: 140px;
background: #dbdfe7;
}
.sidebar-bottom{
min-height: 145px;
background: #7e8aa0;
margin-bottom: -15px;
}
/* Padding used for the core CSS */
.small-padding.top {
padding-top:5px;
}
.small-padding.bottom {
padding-bottom:5px;
}
.small-padding.left {
padding-left:7.5px;
}
.small-padding.right {
padding-right:7.5px;
}
/* Media quries */
#media only screen and (max-width: 768px) {
.small-padding-left {
padding-left: 7.5px;
}
.col-sm-8 {
padding-right: 7.5px;
}
}
<body style="background-color: #4940fb;">
<div class="container">
<div class="row">
<div class="col-sm-4 small-padding right">
<div class="content"></div>
</div>
<div class="col-sm-8 small-padding left">
<div class="content"></div>
</div>
</div>
<div class="row">
<div class="col-sm-7 small-padding right">
<div class="content"></div>
</div>
<div class="col-sm-5">
<div class="row">
<div class="col-sm-12 small-padding left">
<div class="sidebar-top"></div>
</div>
</div>
<div class="row">
<div class="col-sm-12 small-padding left">
<div class="sidebar-bottom"></div>
</div>
</div>
</div>
</div>
</div>
</body>
You need to add some custom css to make it work the right way. Try adding this code to your css file.
.row {
margin-left: -7.5px;
margin-right: -7.5px;
}
.row>[class*="col-"] {
padding-left: 7.5px;
padding-right: 7.5px;
}
In your example the issue happens in below 575 width.
please update the media query in your css file
#media only screen and (max-width: 575px) {
.small-padding.right
{
padding-right: 15px;
}
.small-padding.left
{
padding-left: 15px;
}
}
I'm trying to stack my footer elements on top of each other in tablet and mobile view. There are 3 sections of my footer (contact, logo, and copyright info). The media queries I've added aren't doing anything. Currently the 3 sections are going on top of each other, but look like a staircase, not blocks directly on top of one another.
This is what the live preview looks like:
Could someone tell me what I'm missing? I've just started coding & manipulating templates I've found online. The CSS and HTML codes are below.
UPDATED live preview:
.site-footer {
padding: 5em 0;
background: #f2f2f2;
font-size: 13px;
}
.site-footer p:last-child {
margin-bottom: 0;
}
.site-footer a {
color: #f4b214;
}
.site-footer a:hover {
color: #f4b214;
}
.site-footer h3 {
font-size: 15px;
margin-bottom: 20px;
}
.site-footer .footer-link li {
line-height: 1.5;
margin-bottom: 15px;
}
.site-footer hr {
width: 100%;
}
#media only screen and (min-width: 320px) {
.site-footer .container .row .col-sm-12 {
display: block;
float: none;
width: 100%;
}
}
#media only screen and (min-width: 768px) {
.site-footer .container .row .col-md-12 {
display: block;
float: none;
width: 100%;
}
}
<footer class="site-footer" role="contentinfo">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12 col-sm-12">
<ul class="list-unstyled footer-link">
<li class="d-flex"><span class="mr-3">Office:</span><span class="text-black">439 South Florida Avenue
<br>Suite 202
<br>Lakeland, Florida 33801</span></li>
<li class="d-flex"><span class="mr-3">Phone:</span><span class="text-black">863 683 9297</span></li>
<li class="d-flex"><span class="mr-3">Hours:</span><span class="text-black">Monday - Friday
<br>8:30 AM to 5:30 PM
<br>Meetings by Appointment Only</span></li>
</ul>
</div>
<div class="col-lg-4 col-md-12 col-sm-12">
<img src="img/MR_full_logo.png" style="max-width: 200px" class="center" />
</div>
<div class="col-lg-4 col-md-12 col-sm-12">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
<p align="right" class="copyright">Copyright ©
<script>
document.write(new Date().getFullYear());
</script> All rights reserved <br> This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by Colorlib</p>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</div>
</div>
</div>
</footer>
Hey try the following code and check the output it will fullfill your requirement. Use #media only screen and (max-width: 768px) to get required output in mobile and tab view. width up to 768 refers to tablet view.
.site-footer {
padding: 5em 0;
background: #f2f2f2;
font-size: 13px;
}
.site-footer p:last-child {
margin-bottom: 0;
}
.site-footer a {
color: #f4b214;
}
.site-footer a:hover {
color: #f4b214;
}
.site-footer h3 {
font-size: 15px;
margin-bottom: 20px;
}
.site-footer .footer-link li {
line-height: 1.5;
margin-bottom: 15px;
}
.site-footer hr {
width: 100%;
}
#media only screen and (min-width: 320px) {
.site-footer .container .row .col-sm-12 {
display: block;
float: none;
width: 100%;
}
}
#media only screen and (min-width: 768px) {
.site-footer .container .row .col-md-12 {
display: block;
float: none;
width: 100%;
}
}
#media only screen and (max-width: 768px) {
.site-footer{
text-align: center;
}
.site-footer .footer-link li {
list-style: none;
}
.site-footer p:last-child {
text-align: center;
}
}
<footer class="site-footer" role="contentinfo">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12 col-sm-12">
<ul class="list-unstyled footer-link">
<li class="d-flex"><span class="mr-3">Office:</span><span class="text-black">439 South Florida Avenue
<br>Suite 202
<br>Lakeland, Florida 33801</span></li>
<li class="d-flex"><span class="mr-3">Phone:</span><span class="text-black">863 683 9297</span></li>
<li class="d-flex"><span class="mr-3">Hours:</span><span class="text-black">Monday - Friday
<br>8:30 AM to 5:30 PM
<br>Meetings by Appointment Only</span></li>
</ul>
</div>
<div class="col-lg-4 col-md-12 col-sm-12">
<img src="img/MR_full_logo.png" style="max-width: 200px" class="center" />
</div>
<div class="col-lg-4 col-md-12 col-sm-12">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
<p align="right" class="copyright">Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved <br> This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by Colorlib</p>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</div>
</div>
</div>
</footer>
it is because your p tag in the last div has a property align="right", float it left on small screen or use text-align left and for your image you can give text align left
Im using carousel on my website, and it's somehow not aligned with row, but is instead margined like 40px to the right
I've tried using margin:0, margin-left:0, but nothing works.
Also everytime it scrolls through next images, it gets thrown out of a row for some reason.
Any help?
my html code
<div class="container">
<div class="row">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<ul class="thumbnails">
<li class="col-md-4">
<div class="fff">
<div class="thumbnail">
<img src="random img" alt="">
</div>
<div class="caption">
<h4>random caption</h4>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
my css code
img {
max-width: 100%;
}
.thumbnails li > .fff .caption {
background: #fff !important;
padding: 10px
}
ul.thumbnails {
margin-bottom: 0px;
}
.caption h4 {
color: #444;
}
.caption p {
color: #999;
}
li {
list-style-type: none;
}
#media (max-width: 767px) {
.page-header, .control-box {
text-align: center;
}
}
#media (max-width: 479px) {
.caption {
word-break: break-all;
}
}
Add this CSS Rule:
ul.thumbnails {
padding:0;
}
hope this helps...
Use :
body {
margin:0;
}
.thumbnails {
padding: 0;
}