I have two separate classes in my gallery box container. I've set it to use a flex display, however there is no spacing in the column. Plus, It's not showing all of the pictures as well as the text.
I've messed around with a few of the justify-content attributes, but that hasn't seemed to work. I've also tried messing around with the classes with no luck.
HTML:
<body>
<h1>Gallery Mockup</h1>
<div id="content">
<!-- put your card HTML here -->
<div class="card">
<div id="workplease">
<button onclick="contract_gallery()" type="button" id="close_gallery" style="display:none" align="left">× Close</button>
<center>
<h2>Gallery Mockup</h2>
</center>
</div>
<div id="gallerybox" class="inactive">
<img class="pic" id="pic1" src="https://picsum.photos/230/400">
<img class="pic" id="pic2" src="https://picsum.photos/230/400" style="display:none">
<div class="inactive" id="gtext">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque consequat pellentesque lacus, sit amet sodales tellus porttitor sed. Donec mattis lectus in hendrerit mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis id est vitae leo viverra egestas. Donec commodo, mauris ut sagittis commodo, erat erat tristique metus, at faucibus quam arcu eu metus. Duis eget metus eu arcu porttitor venenatis nec sed nibh. Sed eleifend efficitur orci. Suspendisse eu felis vitae sem varius fringilla. Aliquam erat volutpat. Integer a molestie felis, non ultricies mi. Proin facilisis commodo nisi id fermentum. Ut porttitor molestie rhoncus. Curabitur tempus volutpat mauris, eu dignissim mauris viverra quis.</p>
<p>Donec elementum vestibulum felis, ac commodo erat commodo a. Aenean in felis scelerisque justo ornare gravida et sed massa. Etiam in venenatis neque, accumsan volutpat sapien. Sed molestie nisl sem, ac fringilla mauris dignissim nec. Sed placerat ut elit vitae convallis. Donec iaculis efficitur tincidunt. Suspendisse mollis ut orci at maximus. Sed consectetur diam a mauris consectetur, eu sodales purus sollicitudin. Pellentesque quis tellus id est venenatis pharetra fringilla quis libero. Praesent semper, odio eu consectetur malesuada, enim felis euismod eros, in aliquam leo mi non est. Nam ornare scelerisque nisi nec gravida.</p>
</div>
<img class="pic" id="pic3" src="https://picsum.photos/230/400" style="display:none">
<img class="pic" id="pic4" src="https://picsum.photos/230/400" style="display:none">
<img class="pic" id="pic5" src="https://picsum.photos/230/400" style="display:none">
<img class="pic" id="pic6" src="https://picsum.photos/230/400" style="display:none">
<img class="pic" id="pic7" src="https://picsum.photos/230/400" style="display:none">
<img class="pic" id="pic8" src="https://picsum.photos/230/400" style="display:none">
</div>
<center>
<button type="button" id="gbutton" onclick="expand_gallery()">See Gallery</button>
</center>
</div>
</div>
<script src="js/final-frontier.js"></script>
</body>
CSS:
#media only screen and (max-width: 490px) {
#gallerybox.active {
display: flex;
flex-direction: column;
justify-content: center;
}
}
When the width of the screen goes below 490px, it's supposed to go to flex view, and it does, however there is no spacing in between the photos, and it's not showing all of them. This is what it looks like: https://i.imgur.com/QC9PXfV.png
Your best options would be to wrap your images in div's and use Flexbox accordingly. This approach always works for me and I would recommend it:
Your Html
<div class="flexbox">
<div class="item">
<img src=""/>
</div>
<div class="item">
<img src="" />
</div>
<div class="item">
<img src=""/>
</div>
Your Css:
#media only screen and (max-width: 490px) {
.flexbox {
display: flex;
flex-flow: row wrap;
justify-content: space-evenly;
width: 100%; //take full width
}
.item img {
width: 100%; //set 100% width
height: auto; //auto height adjustment
}
}
Related
I wanted to align button and Image vertically in center, right now button is showing on top of line, I am using bootstrap, can anyone help?
<div class="col-md-12">
<div class="col-md-5" style="margin-left: -37px;"><p class="imageSveMsg" style="display:none">Save</p><button style="display:none" fieldid="81" class="saveimgbtn fileUpload btn btn-primary">Save Image</button>
<div class="fileUpload hideFileUpload btn btn-primary"> <span class="chooseimagetext"><b>Change Image</b></span><input rowid="submission_81" id="uploadImage" onchange="PreviewImage();" tabindex="13" type="file" name="matrix_submission_data81" accept="image/png, image/jpeg , image/jpeg" class="upload matrix_submission_draft ">
</div></div>
<div class="col-md-4">
<input type="hidden" name="oldmatrix_submission_data81" value="16440505543.png"><img id="uploadPreview" src="https://staging-reconresearchlive.kinsta.cloud/wp-content/plugins/matrix-engine/includes/submission_images/16440505543.png" width="50px !important;" height="50px !important;" style="margin-left:30px;max-width: 200px;max-height: 100px;min-height: 100px;vertical-align: middle !important;"></div></div>
css:
.fileUpload {
position: relative;
overflow: hidden;
margin: 10px;
background-color: #E2A169 !important;
border-color: #E2A169 !important;
}
img{
margin-left: 30px;
max-width: 200px;
max-height: 100px;
min-height: 100px;
vertical-align: middle !important;
}
Output:
Current Output Image
Try Changing the first div elements class to <div class="row align-items-center"> instead of <div class="col-md-12">
You can use align-items: center
Please check fiddle
https://jsfiddle.net/zc5axdnr/1/
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
<div class="row" style="align-items: center;">
<div class="col-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec lorem eu leo interdum mollis at quis ligula. Sed pharetra ante metus, sed fermentum diam efficitur vitae. Pellentesque ac porttitor nunc. Mauris lacus quam, facilisis sed congue vulputate, aliquam nec nibh. Maecenas et nulla lacus. Fusce commodo egestas mauris, ut viverra sapien cursus id. Morbi cursus tristique posuere. Pellentesque tincidunt nulla id commodo fermentum. Phasellus sit amet imperdiet orci, eget cursus ipsum. Duis quis metus nunc. Curabitur ex ipsum, suscipit non erat sit amet, lacinia pharetra mi.
Ut vel velit ante. Duis facilisis nisi in sapien posuere gravida. Proin mollis nibh tellus, vitae sodales purus tincidunt eget. Praesent a ullamcorper justo. Integer mollis porttitor sem. Pellentesque vulputate et justo eget blandit. Praesent non lacus mauris. Nam urna ligula, interdum egestas dictum quis, hendrerit pulvinar lorem. Quisque varius eros felis, a dapibus leo consequat eget. Nulla laoreet eros dui, laoreet laoreet libero cursus ullamcorper. Suspendisse hendrerit consequat purus, vel tincidunt risus blandit sed. Nulla mattis laoreet urna quis blandit. Donec et odio facilisis metus congue dictum rhoncus eget turpis. Suspendisse aliquet sit amet ligula quis pellentesque. Cras ullamcorper nec magna id aliquam.
</div>
<div class="col-6 align-items-center">
<button class="btn btn-primary">
Button
</button>
</div>
</div>
</div>
</body>
</html>
I'm coding some HTML and CSS that needs to organize a number of blocks of nested DIVs into a responsive grid which keeps each block of nested DIVs' width the same. I've tried just about everything but nothing has worked so far. As it is now, each block of nested DIVs stacks on top of the next one vertically. I'd like the blocks of nested DIVs to be responsive, in that they wrap if the browser window is resized. Also, I need each DIV to be the same width. My code may be ugly and lacking in style but it's what I had to write to get the current layout working.
I've tried using the flex and flex-wrap properties to create a grid, but it has not worked and it only horribly screws up the display of the nested DIV blocks.
<!DOCTYPE html>
<html>
<head>
<style>
.border_box_main {
width: 100%;
height: auto;
border: 15px solid Green;
box-sizing: border-box;
background-color: Aquamarine;
margin: auto;
text-align: center;
}
.list_1 {
width: 30%;
margin-right: 10px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding: 15px;
background-color: Grey;
display: inline-block;
}
.list_subtext {
text-align: left;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding: 15px;
font-size: 10px;
}
hr {
color: solid black;
width: 75%;
text-align: center;
}
.list_2 {
width: 85%;
margin-right: 10px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding: 15px;
background-color: White;
display: inline-block;
}
.div_list_1 {
display: list-item;
list-style-type: disc;
list-style-position: outside;
text-align: left;
}
</style>
<title>Test</title>
</head>
<body>
<div class="border_box_main">
<hr><br>
<div style="text-align: center;">
<div class="list_1">
<div style="text-align: center;">
<div class="list_2">
<div class="div_list_1">
Test 1 2 3 4.
<div class="list_subtext">(Test2)</div>
</div>
</div>
</div>
</div>
</div>
<div style="text-align: center;">
<div class="list_1">
<div style="text-align: center;">
<div class="list_2">
<div class="div_list_1">
Test 1 2 3 4.
<div class="list_subtext">(Test2)</div>
</div>
</div>
</div>
</div>
</div>
<hr><br>
</div>
</body>
</html>
I get a vertical list of nested DIV blocks, with the same width. The problem is that I want the list of nested DIV blocks to flow horizontally, with each one having the same width and its position on the screen being centered. The list should also be responsive to changes in the browser window size.
EDIT : The JSFiddle link is here https://jsfiddle.net/g42nxk0p/ . AS you might have noticed, when the output window is small, my HTML doesn't render correctly. Specifically, the borders do not shrink in response to the window width. I'd also like to fix this.
Do you try to use Grid layout? I use often grid layout for the main layout and flexbox for items that are in the grid. (CSS Grid Layout Module
- A Complete Guide to Grid)
Well, I finally got it working, at least on Desktop devices :) Thanks to Khoi Le for the suggestions for the grid layout code. I had to tweak his and my code, but I finally got it working. I still have to add the mobile-friendly code, and hopefully that won't break the layout. The only problem, and what seems to be necessary, although it's a kludge, was that I had to add a static pixel width to the DIVs. Here is an example of the working code :
<!DOCTYPE html>
<html>
<head>
<style>
.border_box_main {
width: 100%;
height: auto;
border: 15px solid Green;
box-sizing: border-box;
background-color: Aquamarine;
margin: auto;
text-align: center;
overflow: hidden;
word-wrap: break-word;
}
.list_1 {
width: 320px;
padding: 15px;
display: inline-block;
overflow: hidden;
word-wrap: break-word;
}
.list_subtext {
text-align: left;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding: 15px;
font-size: 10px;
overflow: hidden;
word-wrap: break-word;
}
hr {
color: solid black;
width: 75%;
text-align: center;
}
.list_2 {
margin: 5px;
padding: 15px;
background-color: White;
display: inline-block;
border: 20px solid grey;
width: 200px;
overflow: hidden;
word-wrap: break-word;
}
.div_list_1 {
display: list-item;
list-style-type: disc;
list-style-position: outside;
text-align: left;
overflow: hidden;
word-wrap: break-word;
}
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
justify-content: center;
overflow: hidden;
word-wrap: break-word;
}
.item {
width: 350px;
margin: 20px;
padding: 5px;
min-height: 100px;
text-align: center;
overflow: auto;
word-wrap: normal;
}
</style>
<title>Test...</title>
</head>
<body>
<div class="border_box_main">
<br><br>
<hr>
<br>
<div class="container">
<div class="item">
<div style="text-align: center;">
<div class="list_1">
<div style="text-align: center;">
<div class="list_2">
<div class="div_list_1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pharetra iaculis pretium. Nullam risus dui, placerat et fermentum sed, efficitur non massa. Nulla congue facilisis ipsum at tincidunt. Aenean ut orci efficitur, consequat enim vitae, facilisis ex. Pellentesque imperdiet, arcu eget feugiat ultricies, neque magna hendrerit tortor, ut feugiat risus velit non eros. Aenean scelerisque pulvinar ante, vel porttitor ipsum blandit et. Aliquam eu metus eu felis blandit porta. Quisque ac neque sapien. Duis blandit nisl vitae dui bibendum congue sed sed dolor. Suspendisse vitae arcu placerat, placerat justo non, ornare ex. Phasellus suscipit ultrices ex, sed mollis eros viverra nec. Integer non aliquet augue, vitae condimentum diam. Phasellus ultrices, arcu id malesuada tincidunt, ligula elit tempus felis, quis tincidunt leo nisl sit amet velit. Sed sit amet efficitur turpis, id scelerisque nulla.
<div class="list_subtext">Test1</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<div class="list_1">
<div style="text-align: center;">
<div class="list_2">
<div class="div_list_1">In sit amet odio velit. Cras fermentum est id dapibus accumsan. Pellentesque metus lacus, gravida id justo sit amet, sodales hendrerit neque. Nulla ac orci ac neque placerat commodo. Quisque tortor risus, sagittis vitae risus a, lobortis lobortis eros. Nulla facilisi. Suspendisse luctus leo vel felis cursus, quis aliquet diam aliquet. Maecenas vitae augue placerat, posuere ex ac, venenatis nisi. Nunc mi diam, gravida eu erat nec, porta scelerisque nulla. Proin hendrerit nulla massa, non elementum lectus rhoncus quis. In dapibus vel nunc vel porta. Sed maximus purus vel enim egestas accumsan. Sed sollicitudin libero ac quam iaculis tempus. <div class="list_subtext">Test2</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<div class="list_1">
<div style="text-align: center;">
<div class="list_2">
<div class="div_list_1">Morbi at gravida urna. Morbi imperdiet nisl vel felis interdum, a volutpat turpis eleifend. Sed ultrices sollicitudin elit, sit amet tincidunt velit pharetra ut. Integer tincidunt metus at purus vestibulum, ut viverra orci volutpat. Donec hendrerit quam eu mauris molestie, sed congue orci vehicula. In ac justo tincidunt, suscipit ipsum in, mattis mauris. Duis lobortis lectus at nunc faucibus consectetur. <div class="list_subtext">Test3</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<div class="list_1">
<div style="text-align: center;">
<div class="list_2">
<div class="div_list_1">Cras sit amet sapien mi. Fusce at convallis metus. Quisque ac imperdiet ex. Morbi dictum, felis sit amet placerat malesuada, lectus arcu interdum ipsum, ac egestas nisi leo eget dui. Maecenas id ex rutrum, condimentum quam et, suscipit justo. Nam et pellentesque arcu, vel porttitor sapien. Integer egestas enim quam, vehicula tristique tellus sodales ut.
<div class="list_subtext">Test4</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<div class="list_1">
<div style="text-align: center;">
<div class="list_2">
<div class="div_list_1">Proin sapien urna, cursus eu eros ac, iaculis sollicitudin massa. Vestibulum et sodales felis. Nulla vel cursus lorem. Sed dui libero, cursus sed est in, venenatis volutpat ex. Pellentesque tincidunt risus ut lorem euismod, sit amet facilisis lectus fermentum. Nunc tellus sapien, interdum eu urna id, viverra ultricies massa. Pellentesque elementum nisl leo, ullamcorper elementum metus mattis vel. Cras sodales facilisis eros, a tincidunt nisl vulputate in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut justo euismod, dictum libero in, finibus arcu. <div class="list_subtext">Test5</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<div class="list_1">
<div style="text-align: center;">
<div class="list_2">
<div class="div_list_1"> Proin et leo ultricies, elementum odio a, iaculis sem. Nam nec lacus facilisis metus elementum sodales. Aenean convallis luctus nibh, a luctus tortor. Sed dictum lorem et nulla fermentum, ac consequat justo sagittis. Nullam rhoncus ornare massa eget auctor. Praesent at convallis diam. Aliquam viverra mollis neque, ac porta ligula fringilla ac. Praesent neque nisl, cursus vitae sagittis ut, tristique eget justo. In semper urna nec justo egestas vestibulum.
<div class="list_subtext">Test6</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<div class="list_1">
<div style="text-align: center;">
<div class="list_2">
<div class="div_list_1">Donec et cursus nisl, sed dictum justo. Cras pretium lorem in dui sollicitudin ullamcorper. Nullam et dolor id velit imperdiet consequat. Aenean turpis ex, convallis bibendum elit vitae, fermentum molestie erat. Donec fringilla pulvinar metus, eu varius metus condimentum vel. Suspendisse potenti. Aliquam rutrum euismod dolor, quis eleifend dui faucibus id. Ut vitae leo vel quam tempor dapibus sit amet at ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer quis pharetra leo, vel rutrum diam. Aliquam dapibus tellus sit amet tellus imperdiet, et tincidunt metus ornare. Sed sit amet urna ex. Praesent accumsan ut odio sit amet aliquet. Nunc non varius diam, sed faucibus dolor. Cras ut nunc et purus iaculis luctus nec et quam.
<div class="list_subtext">Test7</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<div class="list_1">
<div style="text-align: center;">
<div class="list_2">
<div class="div_list_1">Maecenas eget tellus mollis, efficitur est a, scelerisque sem. Sed efficitur leo lectus, et fringilla ipsum pellentesque eget. Phasellus vitae egestas magna, sed lobortis erat. Aliquam eget imperdiet ligula, ac dapibus mauris. Sed lobortis bibendum felis, quis varius purus varius sagittis. Vestibulum suscipit dapibus leo non consequat. Phasellus tempor, eros vitae tempor hendrerit, dolor nibh semper metus, a hendrerit turpis leo in est. Donec faucibus iaculis mollis. Suspendisse laoreet a risus a maximus. Ut massa lacus, hendrerit eget eros et, ultrices porttitor libero. Nunc ac laoreet odio. Proin viverra molestie ipsum et faucibus.
<div class="list_subtext">Test8</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<div class="list_1">
<div style="text-align: center;">
<div class="list_2">
<div class="div_list_1">Praesent vitae dolor lacus. Aenean gravida, erat sed ornare laoreet, leo dolor viverra tellus, venenatis mollis nibh dolor id nisi. Morbi ac tempus elit. Maecenas maximus felis ac felis laoreet, id congue urna sollicitudin. Nulla rhoncus feugiat magna, a auctor sapien pharetra nec. Nunc egestas ipsum mi, non volutpat mi dictum non. Ut molestie augue a ex malesuada pretium. In vestibulum efficitur mi. Integer aliquet placerat tempor. Nunc ultricies ipsum vel dictum eleifend. Integer ut dapibus enim, nec porttitor magna. Nulla quis sodales lacus.
<div class="list_subtext">Test9</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr><br>
</div>
</body>
</html>
The JSFiddle is here : https://jsfiddle.net/jdbtwo/ch3tfu2q/
Notice how the tops of the DIVs are all aligned. Also, the grid is repsonsive and responds to browser window size changes properly.
jdb2
EDIT : To get my code working on mobile devices, I had to pair every "width: x;" with a "min-width: x;" . Still, in the browsers on my iPhone, the listing is shifted to the left. I don't know what's causing this.
I'm trying to make a sticky navbar so that when I scroll down I want my logo, my search bar, sign in button and my navbar scroll down as well.
The problem is that when I'm scrolling down, my logo and nav bar go behind my slideshow; they do not show and they're also transparent. I'm working on it for 2 days now but couldn't figure it out.
div#shopify-section-header {
position: fixed;
background-color: black;
}
<div id="shopify-section-header" class="shopify-section header-section">
<header class="site-header" role="banner" data-section-id="header" data-section-type="header-section">
<div class="wrapper">
<div class="grid--full">
<div class="grid-item large--one-half">
<h1 class="header-logo" itemscope="" itemtype="http://schema.org/Organization">
<a href="/" itemprop="url">
<img src="//cdn.shopify.com/s/files/_tagline_bpng?v=1512661427" srcset="//tagline_black_whitebkg_250x.png?v=1512661427 1x, //cdn.shopify.com/s/files/1/2045/6673/files/Ctagline_black_whitebkg_250x#2x.png?v=1512661427 2x"
alt="test" itemprop="logo">
</a>
</h1>
<div class="clearfix"></div>
<a class="contact-header-logo" href="/pages/contact-us">Contact Us</a>
</div>
<div class="grid-item large--one-half text-center large--text-right">
<div class="site-header--text-links medium-down--hide">
<div id="ly-languages-switcher">
English
<span>/</span>
Français
</div>
<div class="currencyRobo medium-down--hide">
<div class="currencyRoboSelect">
<select class="currencyRoboSelectBox" name="currencyRoboSelect">
<option value="CAD">CAD</option>
<option value="CHF">CHF</option>
<option value="EUR">EUR</option>
<option value="GBP">GBP</option>
<option value="USD">USD</option>
</select>
</div>
</div>
<span class="site-header--meta-links medium-down--hide">
Sign in
<span class="site-header--spacer">or</span>
Create an Account
</span>
</div>
<br class="medium-down--hide">
<form action="/pages/search-results" method="get" class="search-bar" role="search">
<input type="hidden" name="type" value="product">
<input type="search" name="q" value="" placeholder="Search all products..." aria-label="Search all products..." class="stop-mega-menu-reinit" autocomplete="OfF" id="_ispbxii_0" autocorrect="off" autocapitalize="off">
<button type="submit" class="search-bar--submit icon-fallback-text">
<span class="icon icon-search" aria-hidden="true"></span>
<span class="fallback-text">Search</span>
</button>
</form>
<a href="/cart" class="header-cart-btn">
<span class="icon icon-cart"></span> Cart <span class="cart-count cart-badge--desktop hidden-count">0</span>
</a>
</div>
</div>
</div>
</header>
<nav class="nav-bar sticky-header" role="navigation">
<div class="wrapper">
<form action="/pages/search-results" method="get" class="search-bar" role="search">
<input type="hidden" name="type" value="product">
<input type="search" name="q" value="" placeholder="Search all products..." aria-label="Search all products..." class="stop-mega-menu-reinit" autocomplete="OfF" id="_ispbxii_1" autocorrect="off" autocapitalize="off">
<button type="submit" class="search-bar--submit icon-fallback-text">
<span class="icon icon-search" aria-hidden="true"></span>
<span class="fallback-text">Search</span>
</button>
</form>
</div>
</nav>
</div>
Check this Fiddle. There are a couple of issues in your HTML, like your wrapping DIV is not closed. First try to fix the HTML, then add CSS to position your sticky DIVs separately.
HTML:
<div id="shopify-section-header" class="shopify-section header-section">
<header class="site-header" role="banner" data-section-id="header" data-section-type="header-section">
<div class="wrapper">
<h1 class="header-logo" itemscope="" itemtype="http://schema.org/Organization">
<a href="/" itemprop="url">
<img src="//cdn.shopify.com/s/files/_tagline_black_whitebkg_250x.png?v=1512661427" srcset="//cdn.shopify.com/s/files/1/2045/6673/files/Camomile_logo_tagline_black_whitebkg_250x.png?v=1512661427 1x, //cdn.shopify.com/s/files/1/2045/6673/files/Camomile_logo_tagline_black_whitebkg_250x#2x.png?v=1512661427 2x"
alt="Camomile Beauty Always Cruelty free, Organic, Vegan and Safe skincare" itemprop="logo">
</a>
</h1>
</div>
</header>
<nav class="nav-bar sticky-header" role="navigation">
<div class="wrapper">
This is also sticky
</div>
</nav>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna nec tincidunt praesent semper feugiat nibh sed. A lacus vestibulum sed arcu non odio euismod lacinia. Tellus mauris a diam maecenas. At tempor commodo ullamcorper a lacus vestibulum sed. Feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Leo a diam sollicitudin tempor id eu nisl. Viverra mauris in aliquam sem fringilla ut morbi tincidunt. At ultrices mi tempus imperdiet nulla malesuada. Nullam eget felis eget nunc. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt.
Massa tincidunt dui ut ornare lectus sit. Posuere urna nec tincidunt praesent semper. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Sapien et ligula ullamcorper malesuada proin libero. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus. Nunc id cursus metus aliquam eleifend mi in nulla. Viverra nibh cras pulvinar mattis nunc sed blandit libero. Tincidunt dui ut ornare lectus sit amet. Sagittis purus sit amet volutpat consequat mauris. Libero justo laoreet sit amet cursus sit amet dictum sit. Viverra adipiscing at in tellus. Lobortis scelerisque fermentum dui faucibus. Cum sociis natoque penatibus et magnis dis. Quisque sagittis purus sit amet volutpat. Aliquam sem et tortor consequat id. Pellentesque diam volutpat commodo sed egestas. Id semper risus in hendrerit gravida. Tincidunt dui ut ornare lectus sit. Non quam lacus suspendisse faucibus interdum posuere. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis.
Et netus et malesuada fames ac turpis egestas. Amet porttitor eget dolor morbi non. Id neque aliquam vestibulum morbi blandit. Et malesuada fames ac turpis. Non curabitur gravida arcu ac tortor dignissim. Id consectetur purus ut faucibus pulvinar elementum integer enim neque. Sit amet consectetur adipiscing elit ut aliquam purus. Leo vel orci porta non. Aliquet nibh praesent tristique magna sit amet purus gravida. Laoreet non curabitur gravida arcu ac tortor. Aenean vel elit scelerisque mauris. Mauris augue neque gravida in fermentum et sollicitudin ac. Non sodales neque sodales ut etiam sit amet nisl. Vel facilisis volutpat est velit egestas dui id. In metus vulputate eu scelerisque felis imperdiet proin fermentum. Non tellus orci ac auctor augue mauris. Scelerisque felis imperdiet proin fermentum leo vel. Faucibus et molestie ac feugiat. Proin sed libero enim sed faucibus turpis.
</div>
</div>
CSS:
div#shopify-section-header .site-header {
position: fixed;
background-color: black;
z-index:999;
width:100%;
top:0;
left:0;
height:100px;
}
div#shopify-section-header .site-header img{
height:50px;
}
div#shopify-section-header .sticky-header{
position:fixed;
z-index:999;
top:150px;
}
.content{
margin-top:200px
}
Play around in this fiddle: https://jsfiddle.net/sztkujb2/10/
The code snippet doesn't contain all the resources and it's hard to understand the environment in which the navbar is used. This is a important detail and its very useful for developers.
Today, I don't have anymore time to continue. I plan to update my answer or maybe other developers will continue from where I left.
My approach for a solution is:
Notes:
a) A sticky nav is already used, on large screens it display but only for the the menu elements. I think the request is to make the entire nav bar sticky.
b) A solution is necessary for only for large screens(desktops), making the entire nav sticky
1) Clone current HTML nav structure and append it after/before the original nav. Without this, after the original nav is sticky(position: fixed), the content will go upwards.
2) After scroll certain distance, add a CSS class to the orignal nav with sticky rules. (#style #UX) I would decrease size of certain elements in order to leave more visible space.
3) Show(visibility : hidden) the cloned nav structure.
Current code:
.sticky-header-structure-on #shopify-section-header{
position : absolute;
}
.sticky-header-structure-on #shopify-section-header {
position : fixed;
width : 100%;
z-index : 1;
top : 0;
}
/* Reset previous class for sticy menu element */
.sticky-header-structure-on #shopify-section-header .nav-bar.sticky-header,
.sticky-header-structure-on #shopify-section-header-clone .nav-bar.sticky-header{
position : static;
width : auto;
}
#shopify-section-header-clone {
display : block!important;
visibility : hidden;
}
var $body = $("body"),
$sectionHeader = $("#shopify-section-header"),
$sectionHeaderClone = $sectionHeader.clone(),
$navBar = $sectionHeader.find(".nav-bar");
$sectionHeaderClone.css("display", "none");
$sectionHeaderClone.attr("id", "shopify-section-header-clone");
$sectionHeaderClone.insertAfter( $sectionHeader );
$(window).on("scroll", function() {
debugger;
// Only for medium and large screens - when the large meniu is active
// As in the CSS #media
if( window.innerWidth <= 768 ) {
return;
}
if( $navBar.hasClass("sticky-header") ) {
$body.addClass("sticky-header-structure-on");
} else {
$body.removeClass("sticky-header-structure-on");
}
});
After seeing your live code, I have added this and tested it:
div#shopify-section-header {
position: fixed;
width: 100%;
display: block;
z-index: 999;
}
I'm trying to position a horizontal line on a section for a site I'm building and can't get it in the correct place. This is a Photoshop version of how it should look -
This is my coded version -
I'm using the hr tag to create it as this seems the most straightforward way - here's the code -
hr {
display: block;
width: 250px;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/gumby/2.6.4/css/gumby.min.css" rel="stylesheet"/>
<section id="welcome">
<div class="container">
<div class="row">
<div class="twelve columns">
<h4>WELCOME TO FEATURE MEDIA</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi. Phasellus tempus, sapien ut luctus pellentesque, lacus risus accumsan lorem, in porta urna tellus ac nibh. Nunc varius elit non diam vehicula aliquet. In eget urna id orci molestie pulvinar. Integer quis risus eu erat iaculis aliquet ut at eros. Etiam feugiat, ante vel molestie finibus, lacus urna pharetra leo, ut lobortis massa lectus quis lorem. Vestibulum rhoncus turpis sagittis sapien vulputate sagittis. Nunc ac velit sollicitudin, consequat arcu ac, tincidunt risus.</p>
</div>
</div>
<hr>
<div class="row">
<div class="four columns">
<div id="video">
<h3>VIDEO</h3>
<img src="images/VIDEO.jpg" alt="Video" style="width:300px;height:150px;">
</div>
</div>
<div class="four columns">
<div id="blog">
<h3>BLOG</h3>
<img src="images/blog.jpg" alt="blog" style="width:300px;height:150px;">
</div>
</div>
<div class="four columns">
<div id="faq">
<h3>FAQ</h3>
<img src="images/faq.jpg" alt="FAQ" style="width:300px;height:150px;">
</div>
</div><hr>
</div>
</div>
</section>
The hr is already given a style in the framework, so if you give it a class like this, it will override the default.
The major reason why it is not exactly positioned vertically between the text and image part, is that the text row and image row has not the same top/bottom margin/padding, so I increased the margin-top/bottom a little, and the second hr, the one after the images, were placed within the row, so I moved it outside.
To get it exact in between, you have elaborate with the row's padding/margin.
Stack snippet
hr.hr250center {
display: block;
width: 250px;
margin-top: 2em;
margin-bottom: 2.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
border-color: red; /* here you set color */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet"/>
<section id="welcome">
<div class="container">
<div class="row">
<div class="twelve columns">
<h4>WELCOME TO FEATURE MEDIA</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque
facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi. Phasellus tempus, sapien ut luctus pellentesque, lacus risus accumsan lorem, in porta urna tellus
ac nibh. Nunc varius elit non diam vehicula aliquet. In eget urna id orci molestie pulvinar. Integer quis risus eu erat iaculis aliquet ut at eros. Etiam feugiat, ante vel molestie finibus, lacus urna pharetra leo, ut lobortis massa lectus quis
lorem. Vestibulum rhoncus turpis sagittis sapien vulputate sagittis. Nunc ac velit sollicitudin, consequat arcu ac, tincidunt risus.</p>
</div>
</div>
<hr class="hr250center">
<div class="row">
<div class="four columns">
<div id="video">
<h3>VIDEO</h3>
<img src="http://placehold.it/100/f00" alt="Video" style="width:300px;height:150px;">
</div>
</div>
<div class="four columns">
<div id="blog">
<h3>BLOG</h3>
<img src="http://placehold.it/100/f00" alt="blog" style="width:300px;height:150px;">
</div>
</div>
<div class="four columns">
<div id="faq">
<h3>FAQ</h3>
<img src="http://placehold.it/100/f00" alt="FAQ" style="width:300px;height:150px;">
</div>
</div>
</div>
<hr class="hr250center">
</div>
</section>
You can use the option: 'padding-top' or 'padding-bottom'
<section id="welcome">
<div class="container">
<div class="row" style="padding-bottom: 50px;">
<div class="twelve columns">
<h4>WELCOME TO FEATURE MEDIA</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel ex nisl. Vestibulum vitae ultricies nisl. Praesent sodales, leo at pellentesque pellentesque, nunc erat dapibus nunc, ut congue libero lorem in orci. Suspendisse potenti. Quisque facilisis mauris in vestibulum tempor. Suspendisse nec venenatis nisi. Phasellus sodales viverra ante quis efficitur. Pellentesque quis orci mi. Phasellus tempus, sapien ut luctus pellentesque, lacus risus accumsan lorem, in porta urna tellus ac nibh. Nunc varius elit non diam vehicula aliquet. In eget urna id orci molestie pulvinar. Integer quis risus eu erat iaculis aliquet ut at eros. Etiam feugiat, ante vel molestie finibus, lacus urna pharetra leo, ut lobortis massa lectus quis lorem. Vestibulum rhoncus turpis sagittis sapien vulputate sagittis. Nunc ac velit sollicitudin, consequat arcu ac, tincidunt risus.</p>
</div>
</div>
<hr>
<div class="row" style="padding-top: 50px; padding-bottom: 50px;">
<div class="four columns">
<div id="video">
<h3>VIDEO</h3>
<img src="images/VIDEO.jpg" alt="Video" style="width:300px;height:150px;">
</div>
</div>
<div class="four columns">
<div id="blog">
<h3>BLOG</h3>
<img src="images/blog.jpg" alt="blog" style="width:300px;height:150px;">
</div>
</div>
<div class="four columns">
<div id="faq">
<h3>FAQ</h3>
<img src="images/faq.jpg" alt="FAQ" style="width:300px;height:150px;">
</div>
</div>
</div> <hr>
</div>
</section>
Deleted all the extra stuff, all I want is the row to float left so there is some text next to the image, but it only moves over one line. Using bootstrap if that helps, along with my own CSS file.
example
<!--main body container -->
<div class="container">
<div class="col-sm-6">
<div class="row">
<h1>About Me</h1>
</div>
<div id="bio" class="row">
<img src= "assets/images/linkedin-logo.png" alt="default photo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus orci nisl, ut maximus eros congue commodo. Vivamus fermentum dictum erat. Fusce feugiat maximus nulla, eget scelerisque eros sodales vel. Ut vehicula velit nisl, et tempor justo blandit in. Morbi a elit eleifend, efficitur felis sed, pellentesque risus. Praesent quis ante et massa vehicula efficitur. Cras id tortor et elit ornare bibendum non non arcu. Sed lectus enim, consectetur eget pretium in, tempus et quam. Suspendisse elementum porttitor elementum. Donec egestas lectus gravida risus convallis consectetur.
</div>
</div>
<!--Main Container End-->
</div>
css code:
#bio {
float: left;
}
Float your image to the left
#bio img {
float: left;
}
Example: https://jsfiddle.net/L75dhtny/
you can try this one:
<!--main body container -->
<div class="container">
<div class="col-sm-6">
<div class="row">
<h1>About Me</h1>
</div>
<div id="bio" class="row">
<img src= "assets/images/linkedin-logo.png" alt="default photo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Etiam dapibus orci nisl, ut maximus eros congue commodo. Vivamus fermentum dictum erat. Fusce feugiat maximus nulla, eget scelerisque eros sodales vel. Ut vehicula velit nisl, et tempor justo blandit in. Morbi a elit eleifend, efficitur felis sed, pellentesque risus. Praesent quis ante et massa vehicula efficitur. Cras id tortor et elit ornare bibendum non non arcu. Sed lectus enim, consectetur eget pretium in, tempus et quam. Suspendisse elementum porttitor elementum. Donec egestas lectus gravida risus convallis consectetur.
</div>
</div>
<!--Main Container End-->
</div>
DEMO HERE
You can try this -
/* css code */
img {
float: left;
padding:2px;
margin-right:4px;
}
<!--main body container -->
<div class="container">
<div class="col-sm-6">
<div class="row">
<h1>About Me</h1>
</div>
<div id="bio" class="row">
<img src="http://placehold.it/350x150">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus orci nisl, ut maximus eros congue commodo. Vivamus fermentum dictum erat. Fusce feugiat maximus nulla, eget scelerisque eros sodales vel. Ut vehicula velit nisl, et tempor justo blandit in. Morbi a elit eleifend, efficitur felis sed, pellentesque risus. Praesent quis ante et massa vehicula efficitur. Cras id tortor et elit ornare bibendum non non arcu. Sed lectus enim, consectetur eget pretium in, tempus et quam. Suspendisse elementum porttitor elementum. Donec egestas lectus gravida risus convallis consectetur.
</div>
</div>
<!--Main Container End-->
</div>
Add
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">