I have a problem, when viewing my site from a phone the images become small in width
they only look complete if the text below is long
the images have a dimension: 70px x 70px
code:
<div class="card mg-b-20">
<div style="padding: 8;" class="card-body">
<div style="" class="table-responsive">
<table style="" class="table mg-b-0 text-md-nowrap" cellspacing="5">
<thead>
<tr>
#foreach($subcategories as $subcategory)
<th class="text-center" style="padding: 1px 5px; 1px 1px; font-size: 8px; ">
<a style="color: inherit;" href="{{ route('subcategory-detail',['categorySlug'=>$categorySlug,'subcategorySlug'=> $subcategory->slug]) }}">
<img style="width: 70px; height: 70px;" src="{{url($subcategory->image)}}" alt="">
<p>{{$subcategory->name}}</p>
</a>
</th>
#endforeach
</tr>
</thead>
</table>
</div>
</div>
</div>
I get the images dynamically by: {{url ($ subcategory-> image)}}
How do I make them look complete?
Related
I've been developing a website with a friend and I have a little problem.
We need to set our footer manually in the page with position:relative and margin-top to fix it because it isn't following the last <tr< end.
I've been trying to fix this problem around 3 weeks and I'm really frustrated with this...
The "footer" <tr> is following the "right-column" <tr>, but even I if I try to remove it, it tries to get aligned with a tr in the top of the page instead of the "container" <tr>
I'm posting the last lines of the code here, but since I have no idea of what is causing this, I'm sending below the website link itself.
My website is onlinewinxclub.com/centro-web/test.php
<tr id="container">
<td id="container_left_column">
<div style="position: relative; margin-top: 11px; margin-left: 15px;">
<iframe id="ranking_iframe" scrolling="no" frameborder="0" src="pages/Iframes/Access_guests.php"></iframe>
</div>
</td>
<td id="container_middle_column" style="vertical-align: top;">
<table id="content_videobox" cellspacing="1" cellpadding="1" border="0">
<tbody>
<tr style="">
<td id="content_videobox_firstcolumn" rowspan="3">
<div id="content_videobox_iframe" frameborder="0" allowfullscreen="" volume="0"><video
class="file" preload="metadata"
poster="././medias/images/Video_Thumbs/happy2021thumb.png"
src="././medias/videos/Happy_2021.mp4" data-overlay="1"></video></div>
</td>
<td id="content_videobox_secondcolumn">
<h2>
<span class="video-title" id="content_videobox_videotitle"
style="text-shadow: 1px 0px 0px #560027;">Happy New Year!</span>
</h2>
<p style="position:relative; top: 150px;">
<span class="video-description" id="content_videobox_videotext"
style="text-shadow: 1px 0px 0px #560027;">2021 arrived. Your favorite Winx fairies and
specialists are hoping it will be better than the last one. The witches? Not
sure.</span>
</p>
</td>
</tr>
<tr style="">
<td id="content_videobox_firstcolumn2">
</td>
</tr>
<tr style="">
<img onclick="javascript:Previous();" class="previous"
style="position: relative; top: 274px; left: 541px; cursor: pointer;"
src="././medias/images/arrow_left.png"
onmouseover="this.src='././medias/images/arrow_left_hover.png';"
onmouseout="this.src='././medias/images/arrow_left.png';">
<img onclick="javascript:Next();" class="next"
style="position: relative; top: 274px; left: 625px; cursor: pointer;"
src="././medias/images/arrow_right.png"
onmouseover="this.src='././medias/images/arrow_right_hover.png';"
onmouseout="this.src='././medias/images/arrow_right.png';">
<td id="content_videobox_secondcolumn2" style="text-align: center">
<span class="video-number"
style="color: white; font-family: Arial; font-size: 20px; height: bold; text-shadow: 1px 0px 0px #560027;">
1/4 </span>
</td>
</tr>
</tbody>
</table>
<div id="content_mininews_frame">
<iframe id="content_mininews_iframe" frameborder="0" src="pages/Mininews/NewsContentV2.php">Browser not
compatible.</iframe>
</div>
</td>
</tr>
<tr>
<td id="container_right_column" style="vertical-align: top;">
<div id="content_horoscope_iframe">
<iframe id="content_horoscope_iframe" frameborder="0" src="pages/Tips.php" data-ruffle-polyfilled="">Browser
not compatible.</iframe>
</div>
<iframe style="position: relative;width: 703px;height: 219px;margin-left: -467px;margin-top: -91px;"
frameborder="0" src="pages/Iframes/Download.php" data-ruffle-polyfilled="">Browser not compatible!</iframe>
</td>
</tr>
<tr id="footer">
<td id="footer_content" colspan="2">
<hr style="margin-top: auto; position: relative;">
<div style="margin-top: auto; position: relative;">
<img id="footer_rainbow_img" src="././medias/images/rainbow_logo_small.jpg">
<p id="footer_text">Winx Club™ a series created and produced by Iginio Straffi and Rainbow S.r.l<br>
© 2011-2021 Winx Club Online - Unofficial WinxClub.com inspirated by the old official website
</p>
</div>
</td>
</tr>
first remove the
#container - position absolute
I think you are positioning it because of the iframe. why don't you add iframe with the .container_middle_column? you can add td and give a width or create new table inside the td, because you are using table. And make #footer - posision relative. If you use bootsrap it will be easy more than this.
I made an invoice which is composed of a table inside a div.
The div has a background image.
On regular screen view, the background for the invoice is working well.
See screen view:
See screen view
However on print preview, the div background is hidden by the table.
See print view
How can I make the print preview like what I see on the screen? I don't want the table to hide the div background image.
HTML:
<div class="invoices">
<div ng-repeat="table in invoicesTables">
<div class="header row"><br>
<div style="margin-bottom: 20px;" class="col-xs-12">
<img src="src/print_statement.PNG" alt="">
</div>
<div class="col-xs-4">
<h5>Customer: <strong style="font-size: 12pt">{{client.Name}}</strong></h5>
</div>
<div class="col-xs-4">
<h5 class="invoiceNumber">Invoice No.: <strong style="font-size: 13pt; color:red">{{table.invoiceNumber}}</strong></h5>
</div>
<div class="col-xs-3">
<h5>
<span>Date: </span><strong style="font-size: 12pt;">{{today | date: fullDate}}</strong>
<!-- <span style="float:left">From: </span><strong style="font-size: 12pt; float:right;">{{table.startDate | date: fullDate}}</strong>
</br></br>
<span style="float:left">Till: </span><strong style="font-size: 12pt; float:right;">{{table.endDate | date: fullDate}}</strong> -->
</h5>
</div>
</div>
<div class="invoicebg">
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Delivery No.</th>
<th colspan="2">Description</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="i in table.tableInvoices | orderBy : '-Date' | reverse ">
<td>{{i.Date | date: fullDate}}</td>
<td>{{i.Id}}</td>
<td colspan="2">{{i.Name}}</td>
<td>{{i.Amount | number : 2}}$</td>
</tr>
</tbody>
</table>
<div ng-style="emptySpaces[$index]"></div>
<div style="font-weight:bold" class="tfoot row">
<div class="col-xs-3" style="border-top:2px solid black;">
أو ما بعادله بالليرة اللبنانية
</div>
<div class="col-xs-7" style="border-top:2px solid black; background-color:lightgray;">
{{table.totalInLetters}} Dollars <span style="float:right;">فقط</span>
</div>
<div class="col-xs-2" style="border:2px solid black;">
{{table.total | number: 2}}$
</div>
</div>
</div>
</div>
CSS:
.invoicebg{
-webkit-print-color-adjust: exact;
background: url('../src/invoicewatermark.png');
background-repeat: no-repeat;
background-size:contain;
background-position:center ;
}
Thank you
Try this, put in your css background:none !important to your table, if doesn't work also try put that property to tr and td too and tell us how did it go
Try adding this in CSS file:
.table {
background-color:rgba(0, 0, 0, 0);
}
I have a table defined using bootstrap 3 and some custom css. When I resize the browser window it ends overflowing the table beyond the width of the enclosing div as shown in the picture below. I am using IE and the developers tool shows no computed table attribute affecting this behavior. I also checked the tr and td dynamically computed attributes and still no luck finding the culprit for this behavior.
Can anyone shed some light into what settings could be provoking this?
<div class="pad-top pad-side">
<div class="row">
<div class="col-lg-3">
<div class="panel panel-default" ng-show="{{reportData.PnlStatistics != undefined}}" style="height: 380px">
<div class="panel-heading">
<label>Expected In-Sample PnL Statistics</label>
</div>
<div class="panel-body" style="padding-top: 5px;">
<table class="table table-x-condensed table-striped table-hover table_nowrap" id="pnlStatisticsTable" st-safe-src="pnlStatistics"
st-table="displayedPnlStatistics">
<thead>
<tr>
<th style="width: 60%;" id="name">Name</th>
<th style="width: 20%;" id="daily">Daily</th>
<th style="width: 20%;" id="optimal">Optimal</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in displayedPnlStatistics">
<td style="width: 60%; padding-top: 0px; padding-bottom: 0px;">{{data.name}}</td>
<td style="width: 20%; padding-top: 0px; padding-bottom: 0px;">{{data.DailyHedge}}</td>
<td style="width: 20%; padding-top: 0px; padding-bottom: 0px;">{{data.OptimalHedge}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
The best solution I have found was to modify the enclosing div style and set a minimum width. This prevents the enclosing parent div from shrinking below the contents size and it works great.
<div class="col-lg-3" style="min-width: 350px;">
...
</div>
I am using bootstrap. This is my code.
HTML
<div class="choose1 hidden-xl hidden-lg hidden-md hidden-sm">
<div class="container">
<div class="row">
<div class="col-md-12 col-xs-12">
<table width="100%">
<tr>
<td align="center" style="padding:5px;"><img src="img/app_store.png" alt="" style="height:auto; width:220px;" /></td>
</tr>
<tr>
<td align="center" style="padding:5px;"><a href="#" ><img src="img/google_play.png" alt="" style="height:auto; width:220px;" /></a></td>
</tr>
<tr>
<td align="center" style="padding:5px;"><a href="#" ><img src="img/amazon.png" alt="" style="height:auto; width:220px;" /></a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
And CSS:
.choose1 {
background: url('img/slides/1mobile.png') top center no-repeat;
height: 320px;
border: 1px solid red;
}
When I check the image on small screen, the banner does becomes small, instead it slips out of the div. Please check the live site here on small screen. WHat should I do so that the image transforms as much as the div is.
Try This:
.choose1 {
background: url('img/slides/1mobile.png') top center no-repeat;
border: 1px solid red;
background-size: 100% auto;
}
I took our signature desing and turned it to a HTML code with my amateurish skills.
But when i put it to outlook, it looks broken.
Can someone show me how to do it or directly fix my code?
<div style="float:left;" id="renlogo">
<img src="http://i.imgur.com/bs6yRbO.png">
</div>
<div style="float:left;" id="colorline">
<div class="green" style="background-color: #67b32e;width: 4px; height: 52px;">
</div>
<div class="pink" style="background-color: #e61e47;width: 4px; height: 52px;">
</div>
<div class="blue" style="background-color: #51bec7;width: 4px; height: 52px;">
</div>
<div class="yellow" style="background-color: #fcd021;width: 4px; height: 52px;">
</div>
</div>
<div id="card" style="float:left;margin-top:20px;margin-left:12px;">
<div class="renname" style="font-size:20pt;font-family:Calibri;font-weight:700;">
Burçak ÇELİK
</div>
<div class="rentitle" style="font-size:15pt;font-family:Calibri;font-weight:200;">
Co-Founder & Managing Partner
</div>
<br/>
<div>
<div class="rengsm" style="font-size:14pt;font-family:Calibri;font-weight:200;">
<span style="font-weight:700;">GSM:</span> +90 (533) 625 04 49
</div>
<div class="renemail" style="font-size:14pt;font-family:Calibri;font-weight:200;">
<span style="font-weight:700;">E-mail:</span> burcak.celik#renunion.com
</div>
<div class="renwebsite" style="font-size:14pt;font-family:Calibri;font-weight:200;">
<span style="font-weight:700;">Website:</span> http://renunion.com
</div>
<div class="renadress" style="font-size:14pt;font-family:Calibri;font-weight:200;">
<span style="font-weight:700;">Adress:</span> Kadıköy - ISTANBUL
</div>
</div>
Fiddle: https://jsfiddle.net/m46zx0oc/
<table>
<tr>
<td>
<div id="renlogo">
<img src="http://i.imgur.com/bs6yRbO.png" width="159" height="208">
</div>
</td>
<td>
<table style="border: none;
border-collapse: collapse;
padding: 0;
margin: 0;">
<tr>
<td class="green" style="background-color: #67b32e;width: 4px; height: 52px;"></td>
</tr>
<tr>
<td class="pink" style="background-color: #e61e47;width: 4px; height: 52px;"></td>
</tr>
<tr>
<td class="blue" style="background-color: #51bec7;width: 4px; height: 52px;"></td>
</tr>
<tr>
<td class="yellow" style="background-color: #fcd021;width: 4px; height: 52px;"></td>
</tr>
</table>
</td>
<td>
<div id="card" style="margin-top:20px;margin-left:12px;">
<div class="renname" style="font-size:20pt;font-family:Calibri;font-weight:700;">
Burçak ÇELİK
</div>
<div class="rentitle" style="font-size:15pt;font-family:Calibri;font-weight:200;">
Co-Founder & Managing Partner
</div>
<br/>
<div>
<div class="rengsm" style="font-size:14pt;font-family:Calibri;font-weight:200;">
<span style="font-weight:700;">GSM:</span> +90 (533) 625 04 49
</div>
<div class="renemail" style="font-size:14pt;font-family:Calibri;font-weight:200;">
<span style="font-weight:700;">E-mail:</span> burcak.celik#renunion.com
</div>
<div class="renwebsite" style="font-size:14pt;font-family:Calibri;font-weight:200;">
<span style="font-weight:700;">Website:</span> http://renunion.com
</div>
<div class="renadress" style="font-size:14pt;font-family:Calibri;font-weight:200;">
<span style="font-weight:700;">Adress:</span> Kadıköy - ISTANBUL
</div>
</div>
</div>
</td>
</tr>
</table>
Instead of using float:left, use table instead. Outlook does not really handle float pretty well. Note that I added an extra <td></td> to create extra margin, feel free to add more for extra spacing.
Edit: Fixed the vertical colorline in Outlook. Also used a table for this to make it.