I have some HTML that will ultimately be sent out as an email. When Chrome is in responsive mode and you shrink the screen down, it enables font-boosting (a concept I just learned about :-) ).
My problem is it does NOT turn it on for inline-blocks.
I know I can disable font boosting via <meta name="viewport" content="width=device-width, initial-scale=1">. I would actually prefer the opposite, with font boosting turned on for every element.
Example of the issue. The inline-block elment is tiny when the width of the screen is shrunk down in responsive mode or when emulating a device.
HTML:
<body>
<div>
Here is a very long line. It appears to turn on font boosting when Chrome
is in responsive mode.<br /><br />Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</div>
<br /><br />
<div style="display: inline">This is an inline</div>
<br />
<div style="display: inline-block; background-color: yellow">
This is a inline-block. It is very tiny.
</div>
<div style="display: block">This is a block</div>
</body>
</html>
Related
I have created my online portfolio and it works fine on desktop. However, whenever I try it on other devices/smartphones, it's no longer responsive. I have the meta tags on my code and I have also a media query on my css. I'm coding it using bootstrap and external css. Also, another problem I am having is the horizontal scroll on mobile.
PS. Removed some vital info on texts.
Here is the code that I'm having a problem with.
<div class="container">
<h2 class="text-center p-3">PROJECTS</h2>
<div class="row">
<div class="col-md-7 text-center">
<h5 class="educare">Title</h5>
<p class="text-justify py-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p class="text-center py-1 tech-stack">
Tech Stack:
<img src="https://img.icons8.com/doodle/48/000000/squarespace.png"/>
<img src="https://img.icons8.com/ios-filled/50/000000/html.png"/>
<img src="https://img.icons8.com/ios-filled/50/000000/css.png"/>
</p>
</div>
<div class="col-md-1 text-left order-md-last order-sm-first">
<img src="..." class="educ-image">
</div>
</div>
<div class="row">
<img src="./images/venture.gif" class="mr-auto venture-gif">
<div class="col-md-7 text-center">
<h5 class="venture-txt">Venture Capital Funds Website</h5>
<p class="text-justify py-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<p class="text-center py-1 tech-stack">
Tech Stack:
<img src="https://img.icons8.com/windows/32/000000/wix.png"/>
<img src="https://img.icons8.com/ios-filled/50/000000/adobe-photoshop--v1.png"/>
<img src="https://img.icons8.com/ios-filled/50/000000/adobe-illustrator.png"/>
</p>
</div>
</div>
</div>
The problem with your mobile scroll should be caused by (elements taking more than device width)..
-Check Elements width in the mobile version & make sure they're taking 100% width in certain media queries..
I have a bootstrap-select component the content of which is expanding beyond the grid the button that triggers it is conforming to. It actually goes completely off the page:
Markup (Django templating, but that isn't relevant I don't think):
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="form-group">
<select
class="selectpicker form-control"
data-title="Please select"
>
{% for item in items %}
<option
data-content="
<div>
<div>
<i class='fa {{ item.icon }}'></i>
<h4-text'>{{ item.title }}</h4>
</div>
<div>
<p class='text'>{{ item.very_long_text }}</p>
</div>
</div>"
></option>
{% endfor %}
</select>
</div>
</div>
</div>
Removing the item.very_long_text (p.text) node solves the problem and the grid is adhered to so that is definitely the problem. I have tried to apply the following styles to that node in order to control the problem but it persists:
width: auto;
width: 100%;
overflow-wrap: break-word;
overflow-wrap: normal;
word-break: break-all;
color: red;
white-space: [every available value];
word-wrap: break-word;
In fact, the only solution that works is this:
.dropdown-menu {
max-width:100%;
}
But that seems really sloppy to me to override a Bootstrap class that is—from what I understand—meant† to work the way that I want it to in the first place.
How can I confine the content of this select menu to grid columns its trigger is confined by?
† The section I've linked to in the Boostrap Select documentation makes this clear IMO
It looks like the content is expanding the grid because by default, bootstrap dropdown menu items have their white-space set to nowrap. Resetting this to normal by for example applying a class to every data-content item seems to fix this issue. Below is a minimal repro.
$('select').selectpicker();
.fix {
white-space: normal
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.3/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.3/js/bootstrap-select.min.js"></script>
<select class="selectpicker" data-title="Please select">
<option title="Option 1"
data-content="
<div class='fix'>
<div>
<i class='glyphicon glyphicon-ok'></i>
<h4>Lorem Ipsum</h4>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>"
></option>
<option title="Option 2"
data-content="
<div class='fix'>
<div>
<i class='glyphicon glyphicon-ok'></i>
<h4>Lorem Ipsum</h4>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>"
></option>
<option title="Option 3"
data-content="
<div class='fix'>
<div>
<i class='glyphicon glyphicon-ok'></i>
<h4>Lorem Ipsum</h4>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>"
></option>
</select>
I am working on a simple css grid resizing of an image that scales down and up when the viewport size changes. In my example the image is in the left most grid cell with text in the adjacent cell just to it's right. Interestingly the resize behavior seems to be impacted differently depending on whether or not your using chrome or firefox. In chrome, when the text pushes the bottom cell boundary past the image height the image height is changed to match thus increasing the size of the image and causing it to scale incorrectly. Whereas in firefox the image height doesn't seem to be impacted and continues to scale down correctly. What thoughts do you have about how to solve this or is this a bug in either the firefox or chrome implementation of the css grid spec? Would love some thoughts either way on how to make both browsers behave consistently here.
Here is an example I threw together on codepen that shows what I'm talking about. Just push your right browser edge to the point that the text exceeds the height of the image height and the behavior I've described becomes obvious.
https://codepen.io/bradnjones/full/WyyOyY
Here's the HTML:
<html dir="ltr" lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS GRID Firefox / Chrome behave differently</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="container">
<img class="image" src="https://drive.google.com /uc?export=view&id=1QCw6g_h8WNfqSH_5iapODpuxNn7uciQB" alt="">
<span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna iqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</span>
</div>
</body>
</html>
Here's the CSS:
.container {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto;
}
.image {
grid-column: 1/2;
grid-row: 1/2;
object-fit: contain;
align-self: start;
width: 100%;
max-height: 100%;
}
.text {
grid-column: 2/3;
grid-row: 1/2;
}
I just figured it out. It wasn't the Grid but the image css fit and alignment properties within the grid. When I changed object-fit from "cover" to "contain" and added align-self: start, chrome behaves the same as Firefox. See updates to codepen and original post for correct code.
I am trying to use the below foundation5 code. The problem is the content is exposed on load. I need it to be hidden until clicked on. I have been able to hide it but then it will not expand. Any suggestion would be greatly appreciated.
Thank you
<div class="row">
<div class="large-12 columns">
<dl class="accordion" data-accordion>
<dd class="accordion-navigation">
XXXXXXXXS
<div id="panel1b" class="content active">
Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</dd>
</dl>
As per the Foundation docs, the the class active is used to display the corresponding content. So if you don't want your content to be displayed when the page loads, remove the class active. Additionally, make sure to keep your HTML markup clean. I see a lot of and invalid markup like unclosed tags in the example you provided. Your final markup should look like this:
<div class="row">
<div class="large-12 columns">
<dl class="accordion" data-accordion>
<dd class="accordion-navigation">
XXXXXXXXS
<div id="panel1b" class="content">Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</dd>
</dl>
</div>
</div>
Can someone explain it for me in simple words please?
A line box is next to a float when there exists a vertical position that satisfies all of these four conditions: (a) at or below the top of the line box, (b) at or above the bottom of the line box, (c) below the top margin edge of the float, and (d) above the bottom margin edge of the float.
Note: this means that floats with zero outer height or negative outer
height do not shorten line boxes.
Whats the meaning of the first paragraph?
What is the outer height? Is it margin?
It is from: CSS spec 2.1 > visual formatting model > section 9.5 Floats
What's the meaning of the first paragraph?
It's really just a precise definition of when a line of text is considered as being "next" to a float, basically when there is vertical overlap between them. When a line of text is considered to be next to a float, the line of text is shortened to avoid the float.
What is the outer height? Is it margin?
Yes, it's the distance from the upper edge of the top margin to the lower edge of the bottom margin. The important thing to remember in this context is that margins can be negative. So the lower edge of the bottom margin can be above the upper edge of the top margin, in which case the height is negative.
See below or http://jsfiddle.net/n0fobpqr/2/ for examples of how adjusting the bottom margin (and hence the outer height) affects the width of the lines of text.
body { font-size:20px; width: 300px; }
figure { float:left; }
img { padding-right: 10px; }
.one figure { margin:0; }
.two figure { margin:0 0 -60px 0; }
.three figure { margin:0 0 -110px 0; }
<div class="case one">
<figure>
<img src="http://placehold.it/100"/>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
<hr/>
<div class="case two">
<figure>
<img src="http://placehold.it/100"/>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
<hr/>
<div class="case three">
<figure>
<img src="http://placehold.it/100"/>
</figure>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
It means floats collapse to the next visible line. You can think of "lines" as boxes that may span across the entire width of the browser window. Floats have no impact on the height of these lines. The outer height is the entire height of the float which includes margins and borders.