Am trying to middle a set of icons to the middle of screen, below is the code:
<div data-role="content" class="ui-content ui-body-a" style="vertical-align: middle" data-theme="a">
<fieldset class="ui-grid-a icon-set" style="vertical-align: middle" data-theme="b">
<div class="ui-block-a center" style="vertical-align: middle">
<a href="test">
<div>
<img src="css/images/test5.png" style="width: 80px;height: 80px"/>
</div>
<div>
Login
</div>
</a>
</div>
<div class="ui-block-b center">
<a href="#settings" data-transition='slide'>
<div> <img src="css/images/test4.png" style="width: 80px;height: 80px"/></div>
<div>Settings</div>
</a>
</div>
<div class="ui-block-a center">
<a href="test">
<div> <img src="css/images/test2.png" style="width: 80px;height: 80px"/></div>
<div>Aboutus</div>
</a>
</div>
<div class="ui-block-b center">
<a href="test">
<div> <img src="css/images/test1.png" style="width: 80px;height: 80px"/></div>
<div>Contact Us</div>
</a>
</div>
</fieldset>
</div>
vertical-align does not work as most people would expect - this property is only available for tables or elements that have style of table-cell or similar (http://www.w3schools.com/cssref/pr_class_display.asp)
you will need to give the DIV element a default size for this to work as well... check this JSBin example and this StackOverflow answer for more insight
Do this:
<div data-role="content" class="ui-content ui-body-a" style="text-align: center;" data-theme="a">
and then this for any div you want to center:
style="margin:0 auto;"
Related
The image shall be responsive in the table cell and the background color shall fill all empty space.
I am working on a Drupal site (ver 8.6.7) that shall make number symbolics displaying in table rows. I am using Drupal8 Zymphonies Theme 8.x-1.3
I want this to work on devices from laptops to phones. I also want the image to fill as much of the cell as possible and the background color shall fill the rest.
I producing this in views within a custom text field.
I am trying to use a CSS class that I put in the td-tag but it is not working.
- In small devices, the image gets very small and do not fill the td-cell.
- The background color does not fill all around the image.
- The empty cells get a white square in the middle.
In CSS-file I have this:
.uptoten {
background-color:yellow;
padding: 0px;
margin: 0px;
}
In custom text field I am use this class in td-tag:
class='uptoten'
Have attached image on the result.
On laptops:
I want the white inner square to disappear and the image to fill out the cell.
On small devices the image is too small:
The inputted Twig:
{%set img_txt = random(['anka', 'groda', 'tomte', 'drake'])%}
{%set img_file = '/sites/default/files/num-images/'~img_txt~'.jpg'%}
{%set img_blanc = '/sites/default/files/num-images/empty.jpg'%}
{%set max=nothing|trim%}
{%set blanc=20-max%}
<table >
<tr>
{% for i in 1..20 %}
{% if i<11 %}
<td class='uptoten'>
{% else%}
<td>
{% endif %}
{% if i<=max %}
<img alt={{img_txt}} src={{img_file}} />
{%else%}
<img alt="empty" src={{img_blanc}} />
{% endif %}
</td>
{% endfor%}
</tr>
</table>
Hope for some help
I think it is the case that you need to install module called
twig_tweak, which easily provides functionality to cut pictures
with desired size in twig at once.
Next: For making it to work on devices (from laptops to phones), you need to define all styles with % sign.
This is the Twig code for one of my projects:
<div class="row"
{% for i in 1..100 %}
<a href="#" class="square">
<div class="content">
<div class="table">
<div class="table-cell">
<b> {{ i }} </b>
</div>
</div>
</div>
</a>
{% endfor %}
</div>
And CSS:
Try The Code Snippet For Resizing Device Width
.square {
float:left;
position: relative;
width: 8%;
padding-bottom : 8%; /* = width for a 1:1 aspect ratio */
margin:1%;
overflow:hidden;
background-color: #0048c8;
border-radius: 5%;
}
.content {
position:absolute;
height:80%; /* = 100% - 2*10% padding */
width:90%; /* = 100% - 2*5% padding */
padding: 10% 5%;
}
.table{
display:table;
height:100%;
width:100%;
}
.table-cell{
display:table-cell;
vertical-align:middle;
height:100%;
width:100%;
color: white;
font-size: 17px;
text-align: center;
}
<div class="row">
<a href="#" class="square">
<div class="content">
<div class="table">
<div class="table-cell">
<b> 1 </b>
</div>
</div>
</div>
</a>
<a href="#" class="square">
<div class="content">
<div class="table">
<div class="table-cell">
<b> 2 </b>
</div>
</div>
</div>
</a>
<a href="#" class="square">
<div class="content">
<div class="table">
<div class="table-cell">
<b> 3 </b>
</div>
</div>
</div>
</a>
<a href="#" class="square">
<div class="content">
<div class="table">
<div class="table-cell">
<b> 4 </b>
</div>
</div>
</div>
</a>
<a href="#" class="square">
<div class="content">
<div class="table">
<div class="table-cell">
<b> 5 </b>
</div>
</div>
</div>
</a>
<a href="#" class="square">
<div class="content">
<div class="table">
<div class="table-cell">
<b> 6 </b>
</div>
</div>
</div>
</a>
<a href="#" class="square">
<div class="content">
<div class="table">
<div class="table-cell">
<b> 7 </b>
</div>
</div>
</div>
</a>
<a href="#" class="square">
<div class="content">
<div class="table">
<div class="table-cell">
<b> 8 </b>
</div>
</div>
</div>
</a>
<a href="#" class="square">
<div class="content">
<div class="table">
<div class="table-cell">
<b> 9 </b>
</div>
</div>
</div>
</a>
<a href="#" class="square">
<div class="content">
<div class="table">
<div class="table-cell">
<b> 10 </b>
</div>
</div>
</div>
</a>
<a href="#" class="square">
<div class="content">
<div class="table">
<div class="table-cell">
<b> 11 </b>
</div>
</div>
</div>
</a>
<a href="#" class="square">
<div class="content">
<div class="table">
<div class="table-cell">
<b> 12 </b>
</div>
</div>
</div>
</a>
<a href="#" class="square">
<div class="content">
<div class="table">
<div class="table-cell">
<b> 13 </b>
</div>
</div>
</div>
</a>
<a href="#" class="square">
<div class="content">
<div class="table">
<div class="table-cell">
<b> 14 </b>
</div>
</div>
</div>
</a>
</div>
i have made the website mobile responsive.All are done.
This is the website which i made responsive.
alpha.dubaiexporters.com
what is happening is that when its of desktop size,the footer links are clickable but when i resize it to small screen,footer links shows unclickable.
i used the inspect element to know the issue and i found that its because of <div class="clearfix"> . So i removed it from my coding but the problem still persists.I dont have any idea.Even i tried removing .clearfix before and after from bootstrap.cs but its not working.[
i dont know why clearfix div is displaying even after removing it from code.
code:
<div class="footer-wrapper">
<div class="footer-container vc_row wpb_row vc_row-fluid ">
<%-- <img src="//cohhe.com/demo/sky/sky-directory/wp-content/uploads/2015/01/skydirectory-footer-logo.png" class="footer-logo " alt="Sky Directory" />--%>
<div class="footer-content" style="padding-top:60px;">
<div class="footer-links-container columns_count_2">
<div id="first" class="widget-area footer-links vc_col-sm-6 " role="complementary">
<div id="sky-directory-useful-links-20" class=" sky-usefullinks widget widget_sky-directory-useful-links row-fluid" style="width: 50%;float:left;">
<div class="useful-links-title">
About DubaiExporters
</div>About Us<br />Member Benefits<br />Link Us<br />Media Partners<br />Contact Us<br /><%--<div class="clearfix"></div>--%></div><div id="sky-directory-useful-links-21" class=" sky-usefullinks widget widget_sky-directory-useful-links row-fluid" style="width: 50%;float:left;">
<div class="useful-links-title">
Information
</div>News<br />Upcoming Exhibitions<br />Advertise<br />Add Your Event<br /><br /><%--<div class="clearfix"></div>--%></div> </div>
<div id="second" class="widget-area footer-links vc_col-sm-6 last" role="complementary">
<div id="sky-directory-contact-us-11" class=" sky-contactus widget widget_sky-directory-contact-us row-fluid">
<div class="contact-us-widget-main">
<div class="contact-us-phone">
<span class="phone-icon fa fa-mobile"></span>
<div class="phone-info-container">
<span class="phone-text">Call us:</span>
<span class="phone-number">+971 4 3050755</span>
</div>
<%--<div class="clearfix"></div>--%>
</div>
<div class="contact-us-lower">
<div class="contact-us-social">
<%--<div class="clearfix"></div>--%>
</div>
<div class="contact-us-email">
<a href="mailto:info#skydirectory.com" class="email-address">
<span class="email-text">Or send an email to:</span>info#dubaiexporters.com</a>
</div>
</div>
<%--<div class="clearfix"></div>--%>
</div>
<%-- <div class="clearfix"></div>--%>
</div> </div>
<%--<div class="clearfix"></div>--%>
</div>
</div>
<%--<div class="scroll-to-top-container">
<div class="scroll-to-top"><span>To Top</span></div>
</div>--%>
<div class="footer-inner">
<div class="footer_info">
<div class="copyright">© 2018, Dubai Exporters</div>
<%--<div class="clearfix"></div>--%>
</div>
</div>
<div class="footer-cloud-container">
<%--<img src="http://cohhe.com/demo/sky/sky-directory/wp-content/themes/sky/images/bottom-cloud.png" width="266" height="116" alt="Footer cloud"/>--%>
<%-- <div class="clearfix"></div>--%>
</div>
</div>
</div>
I have the following bootstrap code:
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-md-2 col-sm-2">
<div style="width: 75px; background-color: #ccc">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-10 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
On tablets and desktops, this code looks good. However, on smaller devices, xs, the right content flows into the image. I am trying to make the text just wrap on the right and not collide with the image.
I have a fiddle here so you can see what I'm talking about. If you open the fiddle and resize the browser small enough, you'll see the right text overlap onto the image. How can I prevent this?
Try this.
<div class="container-fluid">
<div class="row">
<div class="col-xs-3 col-md-2 col-sm-2">
<div style="width: 75px; background-color: #ccc">
<img class="img-responsive" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-9 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
It is because of the width set.
Try this.
JSFiddle
HTML
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-md-2 col-sm-2">
<div style="background-color: #ccc">
<img class="test-image" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-10 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
CSS
.test-image{
width:100%;
height:auto;
min-width:25px;
}
Easiest way I know is to apply a direct width to element. You could theoretically alter the bootstrap 3 SCSS or LESS (whichever you use) and add in a special column class, but this is the most direct method.
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div style="width:75px" class="col-xs-2">
<div style="width: 75px; background-color: #ccc">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-10 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
It is becaue of the width of the col-xs-2.You can chage that.Or try an alternative solution like this
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div style="width: 75px; background-color: #ccc;display:table-cell;">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
<div class=" " style="display:table-cell;vertical-align:middle;">
Right content
</div>
</div></div></div>
Or with css flexboxes like
<div class="container-fluid">
<div class="row">
<div class="col-xs-12" style="display:flex">
<div style="width: 75px; background-color: #ccc;flex:1;">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
<div class=" " style="flex:1;vertical-align:middle;">
Right content
</div></div></div></div>
What i have :
<div id="outerDiv" style="margin: 20px;">
<div id="innerDiv" style="float: left;">
<span>10002</span>
<div class="arrow-up" alt='some text' />
</br>
<div class="arrow-down"/>
</div>
<div><h3>Text</h3></div>
</br>
<span>Some plain text
<br />
</span>
</div>
All elements in outerdiv except span with plain text have to be aligned, and floated to the left, but i cant figure out a way how to do it. if i move something everything else start flying all over the page. What will be the correct way of doing it? Attached a image of what i want to achieve:
use this stracture it can help u
<div id="outerDiv" style="margin: 20px;">
<div id="innerDiv" style="float: left;">
<span style="float:left; margin-top:15px;">10002</span>
<div class=" " style="float:left;">
<div class="arrow-up" alt='some text' /></div>
<div class="arrow-down"/></div>
</div>
<h3 style="float:left;">Text</h3>
<div style="float:none; clear:both"></div>
</div>
</br>
<span>Some plain text</span>
</div>
<img src="logo.jpg">
<div class="fadehover">
<div class="a" ><img src="kulte_gray.jpg" /></div>
<div class="b" ><img src="kulte.jpg" /></div>
</div>
Actually I want to center the image exactly above the div container. Ok i tried with a simple <center> tag it works but im not sure if this is the smart solution for all browsers. Any ideas? smthing like align it over the div?
<style>
#logo {
display: block;
margin: 0 auto;
}
</style>
↑ This will center the #logo within its parent container.
<div class="fadehover">
<img src="logo.jpg" id="logo">
<div class="a" ><img src="kulte_gray.jpg" /></div>
<div class="b" ><img src="kulte.jpg" /></div>
</div>
OR:
<!-- If you cannot put #logo into .fadehover
for some reason -->
<div id="same-width-as-fadehover">
<img src="logo.jpg" id="logo">
</div>
<div class="fadehover">
<div class="a" ><img src="kulte_gray.jpg" /></div>
<div class="b" ><img src="kulte.jpg" /></div>
</div>