I am developing a web in Bootstrap 4 and in the header I have a SVG format logo that has to be responsive (without fixed size) but it is not possible to visualize it unless you leave the property wide at a fixed value in .px some way to be responsive without leaving a fixed value in .px? Because in Chrome, Opera, Safari, Internet explorer leaving the Width property in auto. In all browsers it appears without problem but in Firefox it does not
<div class="col-md-2 col-sm-12 col-xs-12 text-center" style="padding-left: 0px; padding-right: 0px;">
<div style="height: 80px; display: flex; align-items: center;">
<a href="index">
<img style="width: 100% !important; height: auto !important;" src="img/imprentaonline24.svg" alt="imprentaonline24" />
</a>
</div>
</div>
It works fine from if use use directly from url. I'm using FireFox and it works
<div class="col-md-2 col-sm-12 col-xs-12 text-center" style="padding-left: 0px; padding-right: 0px;">
<div style="display: flex; align-items: center;">
<a href="index">
<svg>
<img src="https://www.imprentaonline24.es/img/imprentaonline24.svg"/>
</svg>
</a>
</div>
</div>
Related
Using Bootstrap 4, I'd like to create 3 columns that adjust their width so that padding of each column is consistent and the height of each image is consistent between each column. The goal is for the width and height of each image to increase/decrease as page width changes. Notice, the height of the images and columns should always be synced. I know I can use percentages, but I was hoping there was a flexbox solution. Thanks
Codepen: https://codepen.io/danielgetsthis/pen/qJgyNx
<div class="container">
<div class="row">
<div class="col">
<a href="#" class="text-center">
<span>1</span>
<img src="http://placehold.jp/100x100.png" />
</a>
</div>
<div class="col">
<a href="#" class="text-center">
<span>2</span>
<img src="http://placehold.jp/200x100.png" />
</a>
</div>
<div class="col">
<a href="#" class="text-center">
<span>3</span>
<img src="http://placehold.jp/300x100.png" />
</a>
</div>
</div>
</div>
I'm not sure that I understand the height issue. The columns and images are the same height. To equalize the padding around the images use col-auto instead of col. This makes the columns shrink to fit the width of their content.
<div class="container">
<div class="row justify-content-center">
<div class="col-auto">
<a href="#" class="text-center">
<span>1</span>
<img src="http://placehold.jp/100x100.png" />
</a>
</div>
<div class="col-auto">
<a href="#" class="text-center">
<span>2</span>
<img src="http://placehold.jp/200x100.png" />
</a>
</div>
<div class="col-auto">
<a href="#" class="text-center">
<span>3</span>
<img src="http://placehold.jp/300x100.png" />
</a>
</div>
</div>
</div>
https://www.codeply.com/go/XtNGjb765u
body{
background-color: #eee;
box-sizing: border-box;
}
.col {
display: flex;
flex: 0;
flex-direction: initial;
}
.col a {
display: flex;
flex-wrap: wrap;
padding: 10%;
background-color: tomato;
border: 1px solid green;
color: #FFF;
font-size: 26px;
justify-content: center;
}
span{
display: block;
text-align:center;
}
I run a church website, where we upload the audio from each week's message. I have a few folks who are telling me that on the website, the audio file will play for a few minutes, but then it unexpectedly restarts to the beginning. They can't listen to any of the audio files from start to finish (they run 15-25 minutes). Any suggestions as to what could cause this issue?
The audio files are pushed to iTunes in a podcast, and no one has any trouble with the audio files playing in full on iTunes. The issue is only on the website.
I have not been able to replicate the issue on my computer, so at first I thought it was just one person's problem. However, I've had a few different people tell me they have encountered this problem. You're welcome to test the issue yourself - wsumc.com/multimedia-archive/broken-nation/
Thanks for any help!
<div class="audio-container">
<span class="mejs-offscreen">Audio Player</span>
<div id="mep_0" class="mejs-container wp-audio-shortcode mejs-audio mejs-hide-cues mejs-container-keyboard-inactive" tabindex="0" role="application" aria-label="Audio Player" style="width: 280px; height: 40px; min-width: 169px;">
<div class="mejs-inner">
<div class="mejs-mediaelement">
<mediaelementwrapper id="audio-8556-1"><audio class="wp-audio-shortcode" id="audio-8556-1_html5" preload="none" style="width: 100%; max-width: 100%; height: 100%;" src="http://wsumc.com/wp-content/uploads/Broken-Nation.mp3?_=1">http://wsumc.com/wp-content/uploads/Broken-Nation.mp3</audio></mediaelementwrapper></div>
<div class="mejs-layers">
<div class="mejs-poster mejs-layer" style="display: none; width: 100%; height: 100%;"></div></div>
<div class="mejs-controls">
<div class="mejs-button mejs-playpause-button mejs-play"><button type="button" aria-controls="mep_0" title="Play" aria-label="Play" tabindex="0"></button></div>
<div class="mejs-time mejs-currenttime-container" role="timer" aria-live="off"><span class="mejs-currenttime">00:00</span></div>
<div class="mejs-time-rail" style="width: 145px;">
<span class="mejs-time-total mejs-time-slider" role="slider" tabindex="0" aria-label="Time Slider" aria-valuemin="0" aria-valuemax="NaN" aria-valuenow="0" aria-valuetext="00:00">
<span class="mejs-time-buffering" style="display: none;"></span>
<span class="mejs-time-loaded"></span>
<span class="mejs-time-current"></span><span class="mejs-time-hovered no-hover"></span>
<span class="mejs-time-handle">
<span class="mejs-time-handle-content"></span></span>
<span class="mejs-time-float" style="display: none; left: 0px;">
<span class="mejs-time-float-current">00:00</span>
<span class="mejs-time-float-corner"></span></span></span></div>
<div class="mejs-time mejs-duration-container">
<span class="mejs-duration">00:00</span></div>
<div class="mejs-button mejs-volume-button mejs-mute">
<button type="button" aria-controls="mep_0" title="Mute" aria-label="Mute" tabindex="0"></button></div><a class="mejs-horizontal-volume-slider" href="javascript:void(0);" aria-label="Volume Slider" aria-valuemin="0" aria-valuemax="100" role="slider" style="display: block;">
<span class="mejs-offscreen">Use Up/Down Arrow keys to increase or decrease volume.</span><div class="mejs-horizontal-volume-total">
<div class="mejs-horizontal-volume-current" style="left: 0px; width: 100%;"></div>
<div class="mejs-horizontal-volume-handle" style="left: 100%;"></div></div></a></div></div></div></div>
This question already has answers here:
Chrome / Safari not filling 100% height of flex parent
(5 answers)
Closed 6 years ago.
I can't figure out why flexbox children do not have equal height on iPad (Chrome and Safari). When testing this works fine on the desktop:
But this is how it looks on iPad:
HTML structure:
<div class="flex-grid-quarters">
<div class="tile col">
<div class="tile-content border martlet">
<img src="/images/martlet.jpg"/>
</div>
</div>
<div class="tile col quicklinks">
<div class="tile-content border">
<h3>Quick Links</h3>
{module_menu, version="2", menuId="1958990", moduleTemplateGroup=""}
</div>
</div>
<div class="tile col gold-links">
<div class="tile-content border">
Mill Hill Enterprise
Development Office
Mill Hill School Foundation
National Liberal Club
</div>
</div>
<div class="tile col contact-us">
<div class="tile-content border">
<h3>Contact Us</h3>
<p>Old Millhillians Club</p>
<p>Mill Hill School</p>
<p>The Ridgeway</p>
<p>London NW7 1QS</p>
<br/>
<p>t 020 8906 7948 / 7949</p>
<p>e sk#millhill.org.uk</p>
</div>
</div>
</div>
CSS:
.flex-grid-quarters, .flex-grid-thirds {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.flex-grid-quarters .col {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 25%;
}
I don't believe it is necessary to have display: flex on the children, but I added that anyway in an attempt to get it working. No such luck (the result is exactly the same with or without that). The link to the site if anyone needs it is http://omclub.streeten.co.uk/ Any help much appreciated.
There's a ton of vendor prefixes that are no longer needed, so I removed everything but justify-content and display: flex; It looks like each flex-item has equal heights. Unfortunately I am not able to test it on an iPad (it's the only device I don't have yet)
SNIPPET
.flex-grid-quarters, .flex-grid-thirds {
display: flex;
justify-content: center;
}
.flex-grid-quarters .col {
width: 25%;
outline: 3px dashed red;
}
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
</head>
<body>
<div class="flex-grid-quarters">
<div class="tile col">
<div class="tile-content border martlet">
<img src="/images/martlet.jpg"/>
</div>
</div>
<div class="tile col quicklinks">
<div class="tile-content border">
<h3>Quick Links</h3>
{module_menu, version="2", menuId="1958990", moduleTemplateGroup=""}
</div>
</div>
<div class="tile col gold-links">
<div class="tile-content border">
Mill Hill Enterprise
Development Office
Mill Hill School Foundation
National Liberal Club
</div>
</div>
<div class="tile col contact-us">
<div class="tile-content border">
<h3>Contact Us</h3>
<p>Old Millhillians Club</p>
<p>Mill Hill School</p>
<p>The Ridgeway</p>
<p>London NW7 1QS</p>
<br/>
<p>t 020 8906 7948 / 7949</p>
<p>e sk#millhill.org.uk</p>
</div>
</div>
</div>
</body>
</html>
I have a SharePoint site, I want all the buttons to be in center and visible, but some of them are out of borders, I replaced my file Default.aspx with another from site with buttons(I also copied Image folder and all files I need). But in my site all buttons are placed very left and I want them to be in center.
What can I do?
For example this is code of button with phone on it:
<tr>
<td width="181" height="120" rowspan="1" colspan="1" style="padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px">
<div class="mosaic-news right">
<div class="mosaic-overlay">
<a href="http://workpoint.company.corp/teams/TEM1/BAT%20IS/Pages/Telephony_rus.aspx" style="display: block">
<img class="teams" src="images/rus/telephony.png" alt=""/>
</div>
<div class="details">
<!-- INNER TEXT -->
<div style="position: absolute; width: 182px; height: 120px">
<p class="sq_section" style="top: 50%;height: 120px; margin-top: 40px;">Fabric phones<br/>and phones</p>
</div>
</a>
<!-- END -->
</div>
</div>
</td>
</tr>
<tr>
i am now working for several days now on a header for our project. Everything is ok - but the layout not.
In my Layout I have on the left a logo, in the middle a navbar, and on the right Login/Logout/Register links.
My Problem is, that I can't center the navbar as I want, if I try, then it is only for my display resolution ok and e.g. if I zoom in or out, it is going bad.
This is also very nice, but I don't know how to do it.
I would be really glad if somebody could help me.
Thanks in advance.
HTML
<body>
<div class="row">
<div class="span3">
<img src="/resources/img/logos/bb_logotype_blue_110.png" />
</div>
<div class="span6">
<!-- NavBar -->
<ul id="navbar">
<li>Product</li>
<li>Support</li>
<li>Blog</li>
<li>About</li>
</ul>
</div>
<div class="span3"></div>
<div id="nav-account" class="nav-collapse pull-right">
<ul class="nav">
<li><a id="register" href="/register">Register</a></li>
<li><a id="login" href="/login/form">Login</a></li>
</ul>
</div>
</div>
</div>
<div class="container" style="margin-top:3em">
<h1 id="title"></h1>
... some stuff ...
</div>
CSS
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
#navbar li
{
display: inline;
border-right: 2px solid black;
padding-left: 20px;
padding-right: 20px;
font-weight: bold;
font-size: 16pt;
}
#navbar li:last-child
{
border-right: 0;
padding-right: 0;
}
</style>
In bootstrap, if you place elements inside a <container> block, they will be automatically centered and resized to fit in the grid layout. Perhaps that is what you are looking for.