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
Related
I have a component named admin.component, in this component, I have a menu and a header.
In fact, when I create a new page, for example: the currency page.
The title is at the bottom of the la page, I don't understand why?
Normally, the title must be at the top...
I think that the component admin.component.html isnt't correct?
<div class="sidebar">
<div class="logo-details">
<i class="bx bxl-c-plus-plus"></i>
<span class="logo_name">Menu</span>
</div>
<ul class="nav-links">
<li>
<a routerLink="value" class="active">
<i class="bx bx-grid-alt"></i>
<span class="links_name">Value</span>
</a>
</li>
<li>
<a routerLink="currency">
<i class="bx bx-box"></i>
<span class="links_name">Currency</span>
</a>
</li>
</ul>
</div>
<section class="home-section">
<nav>
<div class="sidebar-button">
<i class="bx bx-menu sidebarBtn"></i>
<span class="dashboard">Dashboard</span>
</div>
<div class="search-box">
<input type="text" placeholder="Search..." />
<i class="bx bx-search"></i>
</div>
<div class="profile-details">
<span class="admin_name">Prem Shahi</span>
<i class="bx bx-chevron-down"></i>
</div>
</nav>
</section>
For the currency.component.html page, I have this:
<div class="home-content">
<h1 style="text-align: center">Currency Page</h1>
</div>
The code is available here, if you wish.
It's working now need to change in admin.component.html with below stracture and resolved issue easily
<router-outlet>
<div class="sidebar">
<div class="logo-details">
<i class="bx bxl-c-plus-plus"></i>
<span class="logo_name">Menu</span>
</div>
<ul class="nav-links">
<li>
<a routerLink="value" class="active">
<i class="bx bx-grid-alt"></i>
<span class="links_name">Value</span>
</a>
</li>
<li>
<a routerLink="currency">
<i class="bx bx-box"></i>
<span class="links_name">Currency</span>
</a>
</li>
</ul>
</div>
<section class="home-section">
<nav>
<div class="sidebar-button">
<i class="bx bx-menu sidebarBtn"></i>
<span class="dashboard">Dashboard</span>
</div>
<div class="search-box">
<input type="text" placeholder="Search..." />
<i class="bx bx-search"></i>
</div>
<div class="profile-details">
<span class="admin_name">Prem Shahi</span>
<i class="bx bx-chevron-down"></i>
</div>
</nav>
<router-outlet></router-outlet>
</section>
</router-outlet>
only add <router-outlet></router-outlet> after </nav> tag and check upper code so you will get idea how to implement
Top Header is now fixed and only content will be change like below ss
I made my frontend for a ecommerce site project and wanted to insert my made html code into my React project. When copy and pasting my code into App.js i got multiple problems and errors which are actually really simple problems but the normal fix won't do it.
My tag connects with my closing div tag and so my open div tag has no closing tag no more.
Ive added some pictures with their errors to make it easier to see.
function App() {
return (
<div className="header">
<div className="container">
<div className="navbar">
<a href="index.html" class="logo">
<h1 style="font-size: 30px;">FLOWERPOWER!<br/>WWW.FLOWERPOWER.NL</h1>
</a>
<nav>
<ul id="MenuItems">
<li>Home</li>
<li>Producten</li>
<li>Tips</li>
<li>Over ons</li>
<li>Contact</li>
<li>Account</li>
</ul>
</nav>
<img src="images/cart.png" width="30px" height="30px"/>
<img src="images/menu.png" class="menu-icon" onclick="menutoggle()"/>
</div>
<div className="row">
<div className="col-2">
<h1>Koop uw feestboeketten hier!</h1>
<p>Ma-za voor 14 uur besteld? Zelfde dag bezorgd,<br/>
Bezorging in heel Nederland<p/>
Kies uit! →
</div>
<div className="col-2">
<img src="images/banner.png"/>
</div>
</div>
</div>
</div>
<div className="categorieen">
<div className="small-container">
<h2 className="title" style="font-size: 50px"> Boeket van de maand</h2>
<div className="row">
<div className="col-3">
<img src="images/featuredbloem.jpg"/>
</div>
</div>
</div>
</div>
<div className="small-container">
<h2 className="title" style="font-size: 50px">Featured product</h2>
<div className="row">
<div className="col-4">
<a href="producten/passievol-details.html">
<img src="images/bloem1.png"/></a>
<h4>Passievol</h4>
<div className="rating">
<i className="fas fa-star"></i>
<i className="fas fa-star"></i>
<i className="fas fa-star"></i>
<i className="fas fa-star"></i>
<i className="far fa-star"></i>
</div>
<p>vanaf $ 79,95</p>
</div>
<div className="col-4">
<a href="producten/welkompasen-details.html">
<img src="images/bloem2.png"/></a>
<h4>Welkom Pasen</h4>
<div className="rating">
<i className="fas fa-star"></i>
<i className="fas fa-star"></i>
<i className="fas fa-star"></i>
<i className="fas fa-star"></i>
<i className="far fa-star"></i>
</div>
<p>vanaf $ 19,95</p>
</div>
<div className="col-4">
<a href="producten/vrolijkpasen-details.html">
<img src="images/bloem3.png"/></a>
<h4>Vrolijk Pasen</h4>
<div className="rating">
<i className="fas fa-star"></i>
<i className="fas fa-star"></i>
<i className="fas fa-star"></i>
<i className="fas fa-star"></i>
<i className="far fa-star"></i>
</div>
<p>vanaf $ 29,95</p>
</div>
<div className="col-4">
<a href="producten/eindelijkvoorjaar-details.html">
<img src="images/bloem4.jpg"/></a>
<h4>Eindelijk voorjaar</h4>
<div class="rating">
<i className="fas fa-star"></i>
<i className="fas fa-star"></i>
<i className="fas fa-star"></i>
<i className="fas fa-star"></i>
<i className="far fa-star"></i>
</div>
<p>vanaf $ 24,95</p>
</div>
</div>
</div>
<div className="footer">
<div className="container">
<div className="row">
<div className="footer-col-1">
<h3>FLOWERPOWER</h3>
<ul>
<li>Over Ons</li>
<li>Contact</li>
<li>Tips</li>
<li>Lorum</li>
<li>Lorum</li>
<li>Lorum</li>
</ul>
</div>
<div className="footer-col-2">
<h3>Zakelijk</h3>
<ul>
<li>Lorum</li>
<li>Lorum</li>
<li>Lorum</li>
</ul>
</div>
</div>
</div>
</div>
<div className="brands">
<div className="small-container">
<div className="row">
<div className="col-5">
<img src="images/logo-ideal.png"/>
</div>
<div className="col-5">
<img src="images/logo-paypal.png"/>
</div>
<div className="col-5">
<img src="images/logo-americanexpress.png"/>
</div>
<div className="col-5">
<img src="images/logo-visa.png"/>
</div>
</div>
<p className="copyright">Copyright © 2021 FLOWERPOWER! - flowerpower.nl Alle rechten voorbehouden.</p>
</div>
</div>
</div>
);
}
export default App;
Your screenshots shows 1 potential error.
You Misplaced closing tag for p element on line 28 screenshot 1
<p> .... <p/>
It should read
<p> .... </p>
Edit:
Your code has 2 issues,
unbalanced div tags,
style props
1st Issue:: Replace this block of code
<div className="col-2">
<h1>Koop uw feestboeketten hier!</h1>
<p>Ma-za voor 14 uur besteld? Zelfde dag bezorgd,<br />
Bezorging in heel Nederland<p />
Kies uit! →
</div>
<div className="col-2">
<img src="images/banner.png" />
</div>
</div>
</div>
with this
<div className="col-2">
<h1>Koop uw feestboeketten hier!</h1>
<p>Ma-za voor 14 uur besteld? Zelfde dag bezorgd,<br />
Bezorging in heel Nederland</p>
Kies uit! →
<div className="col-2">
<img src="images/banner.png" />
</div>
</div>
</div>
2nd Issue:: React style tags acceps an object, and not string
<div style={{fontSize:'20px}}></div>
I think the problem is coming from the fact that, the <div className="header"> ... </div> and <div className="brands"> ... </div> are not all wrapped within a single fragment in the return function. If you correct your code to:
...
function App() {
return(
<>
<div className="header"> ... </div>
<div className="brands"> ... </div>
</>
);
}
export default App;
The error will disappear. Also note that, I have replaced class="" attribute with className="".
Hope the answer is helpful.
React intellisense is getting mad due to you having "class". You need to rename it to className. (this is true for all JSX elements, such as div, a, p, etc...)
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 :)
I have included a sidebar in one column and 3 thumbnails in another 3 columns in a row. The thumbnail image is fitting the entire columns at first but when I resize the thumbnail images are getting smaller keeping the column in full width (as for usual bootstrap responsive works). I need to stretch my images as that of the column they are filled in.
Here's my HTML:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid side-navigation-bar">
<div class="row">
<!--==========================================-->
<!--Side navigation bar-->
<!--==========================================-->
<div class="col-md-3 col-md-3-thumbnail">
<div class="nav-side-menu" >
<div class="brand"><i class="fa fa-heartbeat"> myVitals.com</i></div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list" >
<ul id="menu-content" class="menu-content collapse out" >
<li>
<a href="#">
<i class="fa fa-home fa-lg fa-fw"></i> Home
</a>
</li>
<li>
<a href="#">
<i class="fa fa-book fa-lg fa-fw"></i> My Appointments
</a>
</li>
<li>
<a href="#">
<i class="fa fa-s15 fa-lg fa-fw"></i> Facilities
</a>
</li>
<li>
<i class="fa fa-cogs fa-lg fa-fw"></i> Services
</li>
<li>
<i class="fa fa-stethoscope fa-lg fa-fw"></i> Doctors
</li>
<li>
<a href="#">
<i class="fa fa-medkit fa-lg fa-fw"></i> Medications
</a>
</li>
<li>
<a href="#">
<i class="fa fa-medkit fa-lg fa-fw"></i> Medications
</a>
</li>
</ul>
</div>
</div>
</div>
<!--==========================================-->
<!--End of Side navigation bar-->
<!--==========================================-->
<!--==========================================-->
<!--Cards-->
<!--==========================================-->
<div id="column" class="col-md-3 col-sm-6 col-md-3-thumbnail text-center">
<div class="thumbnail">
<figure class="imghvr-hinge-down">
<img src="http://via.placeholder.com/320x211" alt="Bootstrap Thumbnail Customization">
</figure>
<div class="caption">
<h5><b>Bootstrap Cards Design</b></h5>
<p class="card-description">Hi there How are you?</p>
<p>Read More</p>
</div>
</div>
</div>
<div id="column" class="col-md-3 col-sm-6 col-md-3-thumbnail text-center">
<div class="thumbnail">
<figure class="imghvr-hinge-down">
<img src="http://via.placeholder.com/320x211" alt="Bootstrap Thumbnail Customization">
</figure>
<div class="caption">
<h5><b>Bootstrap Cards Design</b></h5>
<p class="card-description">Hi there How are you?</p>
<p>Read More</p>
</div>
</div>
</div>
<div id="column" class="col-md-3 col-sm-6 col-md-3-thumbnail text-center">
<div class="thumbnail">
<figure class="imghvr-hinge-down">
<img src="http://via.placeholder.com/320x211" alt="Bootstrap Thumbnail Customization">
</figure>
<div class="caption">
<h5><b>Bootstrap Cards Design</b></h5>
<p class="card-description">Hi there How are you?</p>
<p>Read More</p>
</div>
</div>
</div>
</div>
</div>
I even tried the width:100% for the thumbnail image as
.thumbnail > img{width:100%; display:block;}
The problem is, the img is not taking the full-width as that of its column
Can anyone please help me???
Used .img-fluid for responsive image in Bootstrap.4. it have following css:
.img-fluid {
max-width: 100%;
height: auto;
}
https://getbootstrap.com/docs/4.0/content/images/
You can just set the width to 100% and the height to auto, this will expand it to full width.
CSS:
.thumbnail > figure > img {
width: 100%;
height: auto;
}
JSFiddle Demo
I'm using bootstrap for an easy responsive design. However, I moved computer today and was going to work on my project some more and my design is acting up (See attached figures). I have tested to see if I changed width, would it act up; no it did not. I then played with the height of my browsers to see if it did and yes it did act up and displayed improperly. I am fairly new-ish to bootstrap, but I am not sure what is causing this or could be on something on my computer end. I used Chrome for both viewing. I also tested with Edge and it displayed properly.
Look top-right for view port
This is what it should look like
This is what I get when changing resolution
At request, another part of the code which is loaded via JS.
<body>
<div id="interfaceNaviation" style="position:relative;top:0;left:0;right:0;background-color:green;">
<div class="navBar"><span class="navLink">Home</span> <span class="navLink">Presentation</span> <span class="navLink">Schedules</span> <span class="navLink">Display</span></div>
<br>
<div id="loginInfo">
<button id="signinButton" type="button" class="btn btn-primary btn-fixed-width navbar-btn" style="visibility: visible; display: inline;">
Sign in <i class="fa fa-white fa-sign-in icon-right"></i>
</button>
<a href="javascript:void(0);" id="signoutButton" class="navbar-nav" style="visibility: hidden; display: none;">
<span>Sign Out</span>
<i class="fa fa-blue-custom fa-sign-out"></i>
</a>
<div style="display:inline;" id="signinText">Authorize requests using OAuth 2.0:</div>
</div>
</div>
<div id="pres_interface" class="container-fluid" style="height:90%;">
<div id="pres_options" class="row" style="height:5%;">
<div id="add-placeholder" class="col-xs-2"><button id="btn_add-placeholder" class="btn btn-success fa-1.2x">Add Placeholder</button></div>
</div>
<!--style="left:0px;width:20%;height:100%;position:relative;"-->
<div id="pres_editor_panel" class="row" style="height:95%">
<div class="col-xs-2">
<div id="editor_display">
<div id="placeholderContainer"><span class="header fa-1.2x">Placeholders</span></div>
<li><span name="placeholders-change" class="fa-1.2x" data-id="ph1">ph1 <i data-id="void" class="fa fa-trash-o"></i></span></li>
<li><span name="placeholders-change" class="fa-1.2x" data-id="ph2">ph2 <i data-id="void" class="fa fa-trash-o"></i></span></li>
<li><span name="placeholders-change" class="fa-1.2x" data-id="ph04">ph04 <i data-id="void" class="fa fa-trash-o"></i></span></li>
<li><span name="placeholders-change" class="fa-1.2x" data-id="Test">Test <i data-id="void" class="fa fa-trash-o"></i></span></li>
<li><span name="placeholders-change" class="fa-1.2x" data-id="Test1">Test1 <i data-id="void" class="fa fa-trash-o"></i></span></li>
</div>
</div>
<!-- style="width:79.9%;height:100%" -->
<div class="col-xs-10 fa-padless-left">
<iframe id="fake_view" src="fake_view.html" style="width:100%;height:100%;border:1px solid #081D79;"></iframe>
</div>
</div>
</div>
<div id="pres_options-lower" style="background-color:purple;left:0;right:0;text-align:right;bottom:0;">
<button>Restore</button>
<button>Save</button>
<button>Publish</button>
</div>
<div id="window_mask" class="mask hidden"></div>
<div id="popup_display" class="hidden"></div>
<div id="sub_popup_display" class="hidden"></div>
<div id="sub_window_mask" class="mask hidden"></div>
</body>
This is my body code WITHOUT being edited via JS:
<body>
<div id="interfaceNaviation" style="position:relative;top:0;left:0;right:0;background-color:green;">
<div class="navBar"><span class="navLink">Home</span> <span class="navLink">Presentation</span> <span class="navLink">Schedules</span> <span class="navLink">Display</span></div>
<br /><div id="loginInfo">
<button id="signinButton" type="button" class="btn btn-primary btn-fixed-width navbar-btn">
Sign in <i class="fa fa-white fa-sign-in icon-right"></i>
</button>
<a href="javascript:void(0);" id="signoutButton" class="navbar-nav">
<span>Sign Out</span>
<i class="fa fa-blue-custom fa-sign-out"></i>
</a>
<div style="display:inline;" id="signinText"></div>
</div>
</div>
<div id="pres_interface" class="container-fluid" style="height:90%;" >
<div id="pres_options" class="row" style="height:5%;">
<div id="add-placeholder" class="col-xs-2"><button id="btn_add-placeholder" class="btn btn-success fa-1.2x">Add Placeholder</button></div>
</div>
<!--style="left:0px;width:20%;height:100%;position:relative;"-->
<div id="pres_editor_panel" class="row" style="height:95%">
<div class="col-xs-2">
<div id="editor_display" >
</div>
</div>
<!-- style="width:79.9%;height:100%" -->
<div class="col-xs-10 fa-padless-left">
<iframe id="fake_view" src="fake_view.html" style="width:100%;height:100%;border:1px solid #081D79;" ></iframe>
</div>
</div>
</div>
<div id="pres_options-lower" style="background-color:purple;left:0;right:0;text-align:right;bottom:0;">
<button>Restore</button>
<button>Save</button>
<button>Publish</button>
</div>
<div id="window_mask" class="mask hidden"></div>
<div id="popup_display" class="hidden"></div>
<div id="sub_popup_display" class="hidden"></div>
<div id="sub_window_mask" class="mask hidden"></div>
</body>
Thanks for any help! I am stumped at this right now.