I want the text length to shrink when the screen gets smaller
<div class="dress-card hvr-bob">
<div class="dress-card-head">
<img class="dress-card-img-top" src="img/rdr2.jpg" alt="">
</div>
<div class="dress-card-body">
<h2 class="dress-card-title">Red Dead Redemption 2</h2>
<p class="dress-card-para">Social Club Key</p>
<p class="dress-card-para"><span class="dress-card-price">200TL </span>
<!--<span class="dress-card-crossed">300TL</span><span class="dress-card-off"> İndirim!</span>--></p>
<div class="row">
<div class="col-md-6 card-button">
<a style="text-decoration: none;" href="">
<div class="card-button-inner bag-button"><i class="fas fa-shopping-cart"></i> Satın Al</div>
</a>
</div>
<div class="col-md-6 card-button">
<a style="text-decoration: none;" href="">
<div class="card-button-inner wish-button"><i class="fas fa-shopping-basket"></i> Sepete Ekle</div>
</a>
</div>
</div>
</div>
</div>
</div>
help
Add font-size:8vw; to your CSS. You can add it to p or specific for a class or id.
You can change the 8 to any number you want.
I hope thats what you searching :)
Related
I have some ads I want placing side by side and making all the same size but, whilst float: left works to get them to float left, display: inline-block, which should stack them in a grid side by side, and max-width doesn't.
Tried Css
#media (min-width: 768px){.box-
layout {max-width: 100%; float:
left; display: inline-block;}}
This, as mentioned, floats left but doesn't place side by side or make all the ads the same size. It also throws up a css lint obstruction that float and display can not be used together.
https://adsler.co.uk/find-an-event/
HTML:
<div class="line-layout"
style="display: none;">
<li class="event_listing post-6985
type-event_listing status-expired
hentry" style="visibility:
visible;" data-latitude="" data-
longitude="">
<div class="event-
info-row-listing">
<a href="https://adsler.co.uk/
event/new-cross-and-deptford-free-
film-festival/">
<div class="row"><div class="col-
md-1">
<div class="organizer-logo">
<img alt="Deptford Film Festival"
src="https://adsler.co.uk/wp-
content/uploads/event-manager-
uploads/event_banner/2019/05/2
456d41f16399aed538d25b1cd32ad1
4.jpg">
</div>
</div><div class="col-md-4">
<div class="event-title">
<h4>New Cross and
Deptford Free Film Festival</h4>
<div class="boxes-view-
listing-
registered-code">
</div>
<div class="event-
organizer-
name">
<normal>Deptford Film Festival
<normal></normal>
</normal>
</div>
</div>
<div class="col-md-2">
<div class="date"
<date>2019-05-26</date>
</div>
</div>
<div class="col-md-3">
<div class="event-
location"><i class="glyphicon
glyphicon-map-
marker"></i> London </div>
</div>
<div class="col-md-2">
<div class="event-
ticket">#free</div>
</div>
<div class="col-md-3">
</div>
</div>
</a>
</div>
</li>
</div>
<!-- Box Layout -->
<a class="event_listing post-6985
type-event_listing status-expired
hentry" href="https://adsler.co.uk
/event/new-cross-and-deptford-free-
film-festival/">
<div class="box-layout">
<div class="event-img"><img
alt="Deptford Film Festival"
src="https://adsler.co.uk/wp-
content/uploads/event-manager-
uploads/event_banner/2019/05/2
456d41f16399aed538d25b1cd32
ad14.jpg"></div>
<div class="boxes-view-box-
registered-code">
</div>
<div class="event-title">
New Cross and Deptford Free Film
Festival
</div>
<div class="event-start-
date">2019- 05-26
</div>
<div class="event-location">
<i class="glyphicon glyphicon-
map-
marker"></i> London </div>
<div class="box-footer">
<div class="event-
ticket">#free</div>
</div>
</div>
</a>
your html and css are quite chaotic.
I made an example how it should be and how it works.
Ps. don't pay attention to
max-width:800px;
thats just for demo purposes.
https://codepen.io/anon/pen/QXWLrg
Hope it helps you out!
How could I possibly create four grid blocks with height and width in percentage so it could automatically resize on mobile, below is the image of what i am talking about.
I mean - 4 grid blocks , one big one at the left , and one at the right top, with the remaining two juts below the second grid block, trust me this is how best i can explain this, i would so much love and appreciate your Help.
<div class="the-home-big-grid">
<div class="the-real-big-grid">
<div class="first-big-guy">
<img src="assets/img/7.jpg" class="img-responsive" />
<div class="biggrid-overlay">
<div class="before-big-grid-overlay-content">
</div>
<p class="the-big-grid-overlay-cat">
Web Designing
</p>
<h2 class="biggrid-the-featured-title">
The Diffrent typs of Desk there is
</h2>
<div class="the-big-grid-featred-post-data">
<img src="assets/img/avatar2.jpg" class="the-auth-post-image-featured" />By Neon Emmanuel <span class="the-featured-post-date"> <i class="fa fa-clock-o the-featured "></i>3rd Dec 2016</span>
</div>
</div>
</div>
</div>
<div class="secound-big-guy">
<img src="assets/img/2.jpg" class="img-responsive" />
<div class="secound-biggrid-overlay">
<div class="before-secound-grid-overlay-content">
</div>
<p class="the-secound-grid-overlay-cat">
Web Designing
</p>
<h2 class="secound-the-featured-title">
The Diffrent typs of Desk there is
</h2>
<div class="the-secound-grid-featred-post-data">
<img src="assets/img/avatar2.jpg" class="the-auth-post-image-featured" />By Neon Emmanuel <span class="the-featured-post-date"> <i class="fa fa-clock-o the-featured "></i>3rd Dec 2016</span>
</div>
</div>
</div>
<div class="third-big-guy">
<img src="assets/img/1.jpg" class="img-responsive" />
<div class="third-biggrid-overlay">
<div class="before-third-grid-overlay-content">
</div>
<p class="the-third-grid-overlay-cat">
Web Designing
</p>
<h2 class="third-the-featured-title">
The Diffrent typs of Desk there is
</h2>
<div class="the-third-grid-featred-post-data">
<img src="assets/img/avatar2.jpg" class="the-auth-post-image-featured" />By Neon Emmanuel <span class="the-featured-post-date"> <i class="fa fa-clock-o the-featured "></i>3rd Dec 2016</span>
</div>
</div>
</div>
</div>
</div>
</div>
Image
Below is the image of what i meain
Here's Bootply: http://www.bootply.com/JlOEZaBkNs
<div class="row">
<div class="col-xs-6">A
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12">B</div>
</div>
<div class="row">
<div class="col-xs-6">C</div>
<div class="col-xs-6">D</div>
</div>
</div>
</div>
This is what I want it to look like:
I am trying to create an html file that has 5 div boxes like the picture shown above. I have the first three done but I am not sure how to do the bottom two. Any help is appreciated
<div class="row divcenter" style="max-width: 1000px;">
<div class="col-sm-4 bottommargin">
<div class="team">
<div class="team-image">
<img src="images/team/1.jpg" alt="ThreatVulnManage">
<div class="team-overlay">
<div class="team-social-icons">
<a class="si-borderless si-facebook" title="Facebook">
<i style="color:#fff;padding-top: 10px"><ul>Penetration Testing</ul></i>
<i style="color:#fff"><ul>Vulnerability Scans</ul></i>
<i style="color:#fff"><ul>Red/Blue/Purple Team Exercise</ul></i>
<i style="color:#fff"><ul>Black Team</ul></i>
</a>
</div>
</div>
</div>
<div class="team-desc team-desc-bg">
<div class="team-title"><h4>Threat & Vulnerability Management</h4></div>
</div>
</div>
</div>
<div class="col-sm-4 bottommargin">
<div class="team">
<div class="team-image">
<img src="images/team/2.jpg" alt="EnterpriseRiskCompliance">
<div class="team-overlay">
<div class="team-social-icons">
<a class="si-borderless si-facebook" title="Facebook">
<i style="color:#fff"><ul>IT Security Assessment & Cyber Breach Risk Assessment</ul></i>
<i style="color:#fff"><ul>HIPAA & PCI-DSS</ul></i>
<i style="color:#fff"><ul>Third-Party Vendor Risk Assessment</ul></i>
<i style="color:#fff"><ul>Cloud App Risk Assessment</ul></i>
<i style="color:#fff"><ul>Data Discovery Mapping & Classification</ul></i>
<i style="color:#fff"><ul>Compliance Management</ul></i>
</a>
</div>
</div>
</div>
<div class="team-desc team-desc-bg">
<div class="team-title"><h4>Enterprise <br>Risk & Compliance</h4></a></div>
</div>
</div>
</div>
<div class="col-sm-4 bottommargin">
<div class="team">
<div class="team-image">
<img src="images/team/3.jpg" alt="SecurityProgramStrategy">
<div class="team-overlay">
<div class="team-social-icons">
<a class="si-borderless si-facebook" title="Facebook">
<i style="color:#fff;padding-top: 10px"><ul>Infosec Program Development</ul></i>
<i style="color:#fff"><ul>ISO 27002</ul></i>
<i style="color:#fff"><ul>NIST</ul></i>
</a>
</div>
</div>
</div>
<div class="team-desc team-desc-bg">
<div class="team-title"><h4>Security Program <br>Strategy</h4></div>
</div>
</div>
</div>
</div>
<div class="row divcenter" style="max-width: 1000px;">
<div class="col-sm-4 bottommargin">
<div class="team">
<div class="team-image element-5">
<img src="images/team/1.jpg" alt="Trust">
<div class="team-overlay">
<div class="team-social-icons">
<a class="si-borderless si-facebook" title="Facebook">
<i style="color:#fff;padding-top: 10px"><ul>T-Score</ul></i>
<i style="color:#fff"><ul>R-Score</ul></i>
<i style="color:#fff"><ul>PNProtect</ul></i>
<i style="color:#fff"><ul>Trust Restoration Framework</ul></i>
</a>
</div>
</div>
</div>
<div class="team-desc team-desc-bg">
<div class="team-title"><h4>Trust</h4></div>
</div>
</div>
</div>
<div class="col-sm-4 bottommargin">
<div class="team">
<div class="team-image element-4">
<img src="images/team/2.jpg" alt="EducationAwareness">
<div class="team-overlay">
<div class="team-social-icons">
<a class="si-borderless si-facebook" title="Facebook">
<i style="color:#fff;padding-top: 10px"><ul>Security Awareness Training</ul></i>
<i style="color:#fff"><ul>Secure Code Review Training</ul></i>
<i style="color:#fff"><ul>Human Breach Prevention Project</ul></i>
</a>
</div>
</div>
</div>
<div class="team-desc team-desc-bg">
<div class="team-title"><h4>Education & Awareness</h4></div>
</div>
</div>
</div>
Hard to say exactly, without knowing how you're structuring your code. If everything is within one container, you could set it's text-align to center and have the elements within it have display: inline-block.
<div class="wrapper">
<div class="child">
<div class="child">
<div class="child">
<div class="child">
<div class="child">
</div>
And css:
.wrapper {
text-align: center;
}
.child {
display: inline-block;
width: 100px;
height: 100px;
background-color: #777777;
margin: 15px;
}
As long as the children are too wide to all fit on the same row in the wrapper, they'll move on to the next row. Alternatively you can place a <br> element to force them to wrap to a new row or just put them children in separate <div>s
I am very new to coding, and I'm sorry if this suggestion does not help you. I am trying to answer questions so maybe I can learn more myself.
I would do something like this in css:
#boxes {
float: left;
position: relative;
}
.box4 {
clear: left;
}
Then edit the margin accordingly.
I have 3 different elements in my row class with bootstrap. I wish to create a margin (of 20px for example) between EACH of the elements in the row container. Since the elements are divided into 4 equal spaces of the row container (on the same line), adding a margin class with a margin parameter of 20px pushes the other elements to the next line (whereas I want to keep them all in the same line).
My current code
<div class="row">
<a style="display:block" href="#">
<div class="col-sm-4 margin">
<span class="glyphicon glyphicon-envelope"></span>
<h4>About Us</h4>
</div>
</a>
<a style="display:block" href="#">
<div class="col-sm-4 margin">
<span class="glyphicon glyphicon-envelope"></span>
<h4>Contacts</h4>
</div>
</a>
<a style="display:block" href="#">
<div class="col-sm-4 margin">
<span class="glyphicon glyphicon-envelope"></span>
<h4>Upcoming Events</h4>
</div>
</a>
</div>
I've changed the structure to a more proper one I think. And I use padding on h4 element.
See this fiddle
<div class="row">
<div class="col-sm-4">
<h4 class="margin">
<a style="display:block" href="#">
<span class="glyphicon glyphicon-envelope"></span>
About Us
</a>
</h4>
</div>
<div class="col-sm-4">
<h4 class="margin">
<a style="display:block" href="#">
<span class="glyphicon glyphicon-envelope"></span>
About Us
</a>
</h4>
</div>
<div class="col-sm-4">
<h4 class="margin">
<a style="display:block" href="#">
<span class="glyphicon glyphicon-envelope"></span>
About Us
</a>
</h4>
</div>
</div>
Created a fiddle to make things clear .
https://fiddle.jshell.net/q1je1kct/
Is this you wanted
Added
display:inline-block;
Update
https://fiddle.jshell.net/q1je1kct/4/
If you don't want the elements jumping to newline , take a look into this
https://fiddle.jshell.net/q1je1kct/5/
Created using flex concept.
new Update as suggested
https://fiddle.jshell.net/q1je1kct/8/
I've spent three hours trying to reproduce the image above, however I am unable to make the texts remain on the side and centered with facebook-pile and icons. Can anyone help me?
Code:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<section class="social-media">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="fb-pile">
<h2> no Facebook:</h2>
<div class="fb-facepile" data-href="https://www.facebook.com/facebookdevelopers" data-max-rows="1" data-colorscheme="light" data-size="small" data-show-count="true"></div>
</div>
</div>
<div class="col-md-4">
<div class="social-icons">
<h2>Compartilhar:</h2>
<a target="_blank" href="" title="Ir para página do facebook">
<span class="fa fa-facebook fa-2x"></span>
</a>
<a target="_blank" href="" title="Ir para página do twitter">
<span class="fa fa-twitter fa-2x"></span>
</a>
<a target="_blank" href="" title="Ir para página do instagram">
<span class="fa fa-instagram fa-2x"></span>
</a>
</div>
</div>
<div class="col-md-2">
<div class="trip-advisor">
<img class="trip-advisor-img" title="Recomende o Pub Crawl no Trip Advisor" src="http://upload.wikimedia.org/wikipedia/fr/1/1d/TripAdvisor-logo.png"/>
</div>
</div>
</div>
</div>
</section>
Try changing the .social-media h2 style to include display: inline-block instead of floating it:
http://codepen.io/a_double/pen/EayaOa