img
please see this image, you can see there is a small logo on the left, I want to increase its size how to do that? The code is in the image and in text format here too. Please help me fix it.
<div class="topbar-wrapper">
<header class="header2">
<div class="top-wrappers">
<nav class="top-gridnav">
<div id="breakingnews"><span class="breakhead"><i class="fa fa-circle-o-notch fa-spin"></i> Trending</span>
<div id="adbreakingnews"><span>No result!</span></div></div>
<div class="top-navigation-right">
<div class="top-social-wrapper">
<div class="social-icon"><i class="fa fa-youtube-play"></i></div>
</div>
</div>
<div class="clear"></div>
</nav>
</div>
</header>
</div>
Use font-size property in style attribute or change it by css.
I have added as 20px.
Hope that Helps.
<div class="topbar-wrapper">
<header class="header2">
<div class="top-wrappers">
<nav class="top-gridnav">
<div id="breakingnews"><span class="breakhead"><i class="fa fa-circle-o-notch fa-spin"></i> Trending</span>
<div id="adbreakingnews"><span>No result!</span></div></div>
<div class="top-navigation-right">
<div class="top-social-wrapper">
<div class="social-icon"><i style="font-size:20px" class="fa fa-youtube-play"></i></div>
</div>
</div>
<div class="clear"></div>
</nav>
</div>
</header>
</div>
Related
I am a beginner at css or bootstrap.
I want to make a page that shows like below
but it can't work now
This is just for PC show
This is for mobile status but logo has to be in the center of the image.
This is my code
<a href="#" class="open_menu bg-light radius_full">
<i class="fas fa-bars lh-40"></i>
</a>
<div class="col-lg-3 logo" data-aos-duration="600" data-aos="fade-down" data-aos-delay="1200">Startup 3</div>
<i class="fas fa-times"></i>
<div class="navigation_mobile bg-dark type1">
<div class="px-40 pt-60 pb-60 inner">
<div class="logo color-white mb-30">Startup 3</div>
</div>
<div class="socials mt-40">
</div>
<div class="mt-50 f-14 light color-white op-3 copy">© 2018 Designmodo. All rights reserved.</div>
</div>
</div>
<!-- Header 1 -->
<header class="pt-195 pb-110 bg-light header_1">
<!-- Header Menu 1 -->
<nav class="header_menu_1 pt-30 pb-30 mt-30">
<div class="container px-xl-0">
<div class="row justify-content-center align-items-center f-18 medium">
<div class="col-lg-3 logo" data-aos-duration="600" data-aos="fade-down" data-aos-delay="1200">Startup 3</div>
</div>
</nav>
Please help me
Thank you
I solved it.
This is what i was searched.
https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488
I've tried to use bootstrap template but it doesn't work correctly on Safari and iOS gadgets, my navbar is going outside to the window border. But it excellent works on another browsers.
<div class="container">
<div class="row">
<div class="col-md-9 col-sm-8">
<div class="hd-lft">
<ul>
<li><i class="fa fa-phone"></i>(888) 010203-4567</li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-4">
<div class="hd-rgt">
example#mail.com
</div>
</div>
</div>
</div>
It looks like that:
How could I solve that issue?
All working, u have 1 extra div and check ur resolution
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="hd-lft">
<ul>
<li><i class="fa fa-phone"></i>(888) 010203-4567</li>
</ul>
</div>
</div>
<div class="col-xs-6">
<div class="hd-rgt">
example#mail.com
</div>
</div>
</div>
</div>
I'm trying to make the entire content inside the <a> tag clickable but only the text is right now.
Here a CodePen: http://codepen.io/francobermudez/pen/dvBpNw?editors=1100
HTML:
<section id="ultimos-eventos">
<div class="eventos-wrap">
<a href="#">
<div class="evento">
<div class="evento-fecha">
<div class="evento-dia">20</div>
<div class="evento-mes">MAR</div>
</div>
<div class="evento-info">
<div class="evento-titulo">This is my title</div>
<div class="evento-subtitulo">
<div class="evento-direccion"><div></div>This is my subtitle</div>
<a class="btn-evento btn-azul" href="#">Detalles</a>
</div>
</div>
</div>
</a>
</div>
</section>
You have a link inside a link (The "Detalles" text) - that cannot work. Delete the inner link (i.e. convert it to a regular text div or p tag) and you'll be able to click the whole container.
<section id="ultimos-eventos">
<div class="eventos-wrap">
<a href="#">
<div class="evento">
<div class="evento-fecha">
<div class="evento-dia">20</div>
<div class="evento-mes">MAR</div>
</div>
<div class="evento-info">
<div class="evento-titulo">This is my title</div>
<div class="evento-subtitulo">
<div class="evento-direccion"><div></div>This is my subtitle</div>
<div>Detalles</div>
</div>
</div>
</div>
</a>
</div>
</section>
http://codepen.io/anon/pen/GWbNjN?editors=1100
I want the three div containers to line up side by side with a max-width of 1044px. I tried using col-md-4, because I have margin:20px, it pushed the third div container to the second row. I read up online, some people suggested using a div class="row", I tried that, end result is the same.
Here is my HTML:
<div class="engineering-section col-xs-12">
<div class="engineering-section-title title-text text-center">Engineering</div>
<div class="row">
<div class="card-container">
<div class="card-section col-md-4">
<div class="mdl-card__media">
<img src="img/engineer-1.jpg">
</div>
<div class="mdl-card__supporting-text">
<span class="mdl-typography--font-light mdl-typography--subhead">V8.8 aspenONE Enginnering Suite (May 2015)</span>
<div class="checksum">
<a class="info_checksum" href="#">Checksum</a>
</div>
</div>
<div class="card_actions">
<a class="card-links" href="#">
Download Now
<i class="fa fa-chevron-right"></i>
</a>
</div><!--end card_actions-->
</div><!--end mdl-cell-->
<div class="card-section col-md-4">
<div class="mdl-card__media">
<img src="img/engineer-2.jpg">
</div>
<div class="mdl-card__supporting-text">
<span class="mdl-typography--font-light mdl-typography--subhead">V8.8 aspenONE Process Manuals and Process Tools</span>
<div class="checksum">
<a class="info_checksum" href="#">Checksum</a>
</div>
</div>
<div class="card_actions">
<a class="card-links" href="#">
Download Now
<i class="fa fa-chevron-right"></i>
</a>
</div><!--end card_actions-->
</div><!--end mdl-cell-->
<div class="card-section col-md-4">
<div class="mdl-card__media">
<img src="img/engineer-3.jpg">
</div>
<div class="mdl-card__supporting-text">
<span class="mdl-typography--font-light mdl-typography--subhead">Aspen License Deployment Assistant</span>
<div class="checksum">
<a class="info_checksum" href="#">Checksum</a>
</div>
</div>
<div class="card_actions">
<a class="card-links" href="#">
Download Now
<i class="fa fa-chevron-right"></i>
</a>`enter code here`
</div><!--end card_actions-->
</div><!--end mdl-cell-->
</div><!--end row-->
</div><!--end card-container-->
Remove custom styles of margin from card-section class. It will work
You have to follow these 3 rules :
Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be immediate children of rows.
It should look like this :
<div class="container-fluid"><!--<div class="container">-->
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
</div>
See this link for more information about the Bootstrap responsive design :
http://getbootstrap.com/css/
You are doing wrong here
<div class="card-section col-md-4">
Put card-section inside col-md-4
<div class="col-md-4">
<div class="card-section">
it can give you the space between 3 cols and you can style the content too
and remove margin: 20px; it's unnecessary now.
Fiddle example
I use this to load a page and replace the current page:
$.get('genres.html').done(function (data) {
$('#pagecontent').html(data);
})
When i do this everything in de body gets replaced with the new content.
I need to replace the full body except this footer.
I did see something about div:not but i think thats not working with ajax.
How can i replace everything except the footer:
<footer class="footer bg-dark">
<div id="jp_container_N">
<div class="jp-type-playlist">
<div id="jplayer_N" class="jp-jplayer hide"></div>
<div class="jp-gui">
<div class="jp-video-play hide"><a class="jp-video-play-icon">play</a></div>
<div class="jp-interface">
<div class="jp-controls">
<div><a class="jp-previous"><i class="icon-control-rewind i-lg"></i></a>
</div>
<div><a class="jp-play"><i class="icon-control-play i-2x"></i></a>
<a class="jp-pause hid"><i class="icon-control-pause i-2x"></i></a>
</div>
<div><a class="jp-next"><i
class="icon-control-forward i-lg"></i></a></div>
<div class="hide"><a class="jp-stop"><i class="fa fa-stop"></i></a>
</div>
<div><a class="" data-toggle="dropdown" data-target="#playlist"><i
class="icon-list"></i></a></div>
<div class="jp-progress hidden-xs">
<div class="jp-seek-bar dk">
<div class="jp-play-bar bg-info"></div>
<div class="jp-title text-lt">
<ul>
<li></li>
</ul>
</div>
</div>
</div>
<div class="hidden-xs hidden-sm jp-current-time text-xs text-muted"></div>
<div class="hidden-xs hidden-sm jp-duration text-xs text-muted"></div>
<div class="hidden-xs hidden-sm"><a class="jp-mute" title="mute"><i
class="icon-volume-2"></i></a> <a class="jp-unmute hid"
title="unmute"><i
class="icon-volume-off"></i></a></div>
<div class="hidden-xs hidden-sm jp-volume">
<div class="jp-volume-bar dk">
<div class="jp-volume-bar-value lter"></div>
</div>
</div>
<div><a class="jp-shuffle" title="shuffle"><i
class="icon-shuffle text-muted"></i></a> <a
class="jp-shuffle-off hid" title="shuffle off"><i
class="icon-shuffle text-lt"></i></a></div>
<div><a class="jp-repeat" title="repeat"><i
class="icon-loop text-muted"></i></a> <a
class="jp-repeat-off hid" title="repeat off"><i
class="icon-loop text-lt"></i></a></div>
<div class="hide"><a class="jp-full-screen" title="full screen"><i
class="fa fa-expand"></i></a> <a class="jp-restore-screen"
title="restore screen"><i
class="fa fa-compress text-lt"></i></a></div>
</div>
</div>
</div>
<div class="jp-playlist dropup" id="playlist">
<ul class="dropdown-menu aside-xl dker">
<!-- The method Playlist.displayPlaylist() uses this unordered list -->
<li class="list-group-item"></li>
</ul>
</div>
<div class="jp-no-solution hide"><span>Update Required</span> To play the media
you will need to either update your browser to a recent version or update
your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash
plugin</a>.
</div>
</div>
</div>
</footer>
Just put everything outside the footer in a container, then replace the contents of that. Something like:
<div id="content">
...your content here
</div>
<footer>
</footer>
Then do:
$.get('genres.html').done(function (data) {
$('#content').html(data);
})