I know that on bootstrap 4, you could simply write "order-#" in each div, but my project is based on bootstrap 3 so it would create problems if I change the versions now.
Please note that on a mobile screen, it needs to have this order: Image, Text, Image, Text, Image, text (reading from top to bottom)
In Bootstrap 3, you can use push and pull as answered here: How do I change Bootstrap 3 column order on mobile layout?
Edit:
Here is a simple example that will display:
In the 1st row: Image on the left and Text on the right
In the second row: Text on the left and Image on the right
But on mobile, it will display in this order: Image - Text - Image - Text, because on md screen size and up we push the image and we pull the text
<div class="row">
<div class="col-md-6"><img src="my_image.png"></div>
<div class="col-md-6">Text here</div>
</div>
<div class="row">
<div class="col-md-6 col-md-push-6"><img src="my_image.png"></div>
<div class="col-md-6 col-md-pull-6">Text here</div>
</div>
You can refer to this documentation to learn more.
I am trying to implement a slick carousel in which we can display images of various friends.
The issue I am facing is that when I am working on slick on desktop it is working fine, but as soon as I move into mobile mode/mobile screen the slick carousel breaks. I am not sure whether it is the problem with the image width or size for that matter
The below is the image of what issue I am facing:
As you can see the images are coming one below the other instead of a default carousel.
I am making an API call to fetch the data and display the result. This is my HTML file:
<div class="col-xs-6 col-sm-4 col-sm-pull-4" style="border: 1px solid;height: 400px;">
<slick settings="jumboSlickPanel" style="position: inherit !important;">
<img class="thumbnail_fan" ng-repeat="fanbook in fan" src="{{'https://files.bewakoof.com/uploads/fanbook/thumbs/'+fanbook.image.image_file_name}}" style="line-height: 0px;">
</slick>
</div>
I have used the below code to stop the element getting overflowed. But now the images are not loading by default. If I change the width of the screen it then seems to work perfectly fine. I have added the following:
<slick class="slick_conf" settings="jumboSlickPanel" ng-if="dataLoaded" data="dataLoaded" init-onload="false" style="position: inherit !important;">
<img class="thumbnail_fan" ng-repeat="fanbook in fan" src="{{'https://files.bewakoof.com/uploads/fanbook/thumbs/'+fanbook.image.image_file_name}}" style="line-height: 0px;width: 96%;">
</slick>
Can someone please help me out and tell me how to trigger the carousel?
Thanks for the help.
So basically I am using a jquery plug-in called blueprint split layout. The code for it can be found at: http://tympanus.net/Blueprints/SplitLayout/index.html. I modified the code to fit with my website theme and it worked perfectly, that is until I put it inside a section container with a class of content. Whenever it goes into this container, it ceases to function. However, if I keep this out of the div container, it functions beautifully, but screws the rest of the site layout up. I have searched for days for a solution, and I have tweaked and rebuilt my code to no end with no success. Can anyone please tell me what is going wrong? On another note, I did notice that some of my links are not working either when in this container. I've tried tweaking it to a div container, a section container, and article container, nothing works.
Here is a link to my html: http://codepen.io/luvmeeluvmenot/pen/avzxqZ.html
The code in question is:
<div class="splitcontainer">
<div id="splitlayout" class="splitlayout">
<div class="intro" >
<div class="side side-left">
<div class="intro-content">
<div class="profile_containerL">
<div class="profile"><img src="imgs/profile1.jpg" alt="profile1">
</div>
<div class="h1s"><span>Andrew Mac Gregor </span>Web Designer
</div>
</div>
</div>
</div>
<div class="side side-right">
<div class="intro-content">
<div class="profile_container">
<div class="profile"><img src="imgs/profile2.jpg" alt="profile2"></div>
<div class="h1s"><span>Brittney Mac Gregor </span>Web Developer</div>
</div>
</div>
</div>
<Article>
<div class="page page-right">
<div class="page-inner">
<div class="back_R">
<a href="javascript:history.go(0)">
<img src="imgs/whiteX.png" alt="BACK" />
</a>
</div>
<div class="section">
<div class="h2s">Web Development</div>
<p>...</p>
</div>
</div><!-- /page-inner -->
</div><!-- /page-right -->
<div class="page page-left">
<div class="page-inner">
<div class="back_L">
<a href="javascript:history.go(0)">
<img src="imgs/whiteX.png" alt="BACK" />
</a>
</div>
<div class="section">
<div class="h2s">Web Design</div>
<p>...</p>
</div>
</div><!-- /page-inner -->
</div><!-- /page-left -->
</div><!-- /intro -->
</div><!-- /container2 -->
</div><!-- /splitcontainer -->
Here is one to my css: http://codepen.io/luvmeeluvmenot/pen/avzxqZ.css
The css code in question is:
.side-left,.side-right{color:#fff;background-image:url(../imgs/ABbg.png)}.page,.side{-webkit-backface-visibility:hidden}.splitcontainer{position:inherit;height:600px;margin-left:auto;margin-right:auto;overflow-x:hidden;z-index:2000}.side{position:absolute;top:0;z-index:100;width:50%;height:600px;text-align:center;background-color:#000}.close-left .side-left,.close-right .side-right,.open-left .side-left{z-index:200}.open-left .side,.open-right .side{cursor:default}.side-left{left:0}.side-right{right:0}.intro-content{position:absolute;top:50%;left:50%;padding:0 1em;width:50%;cursor:pointer;-webkit-transform:translateY(-50%) translateX(-50%);transform:translateY(-50%) translateX(-50%)}.profile{margin:0 auto;width:140px;height:140px;border-radius:50%}.profile img{max-width:100%;border-radius:50%}.intro-content .h1s>span{display:block;white-space:nowrap}.intro-content .h1s>span:first-child{font-weight:300;font-size:2em}.intro-content .h1s>span:nth-child(2){position:absolute;margin-top:.5em;padding:.8em;text-transform:uppercase;letter-spacing:1px;font-size:.8em}.intro-content .h1s>span:nth-child(2):before{position:absolute;top:0;left:25%;width:50%;height:2px;background:#000;content:''}.profile_container,.profile_containerL{padding-top:20px;background-color:rgba(0,0,0,.8);border-radius:20px}.profile_container{box-shadow:2px 3px 5px -1px rgba(255,255,255,.8)}.profile_containerL{box-shadow:-2px 3px 5px -1px rgba(255,255,255,.8)}.side-right .intro-content h1>span:nth-child(2):before{background:#000}.back_L{float:left}.back_R{float:right}.back_L img{float:left;width:50px;height:50px}.back_R img{float:right;width:50px;height:50px}.back_L img:hover,.back_R img:hover{opacity:.4}.mobile-layout .back{position:absolute}.back-left{left:12.5%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.back-right{right:12.5%;-webkit-transform:translateX(50%);transform:translateX(50%);color:#fff}.open-left .back-right,.open-right .back-left{visibility:visible;opacity:1;-webkit-transition-delay:.3s;transition-delay:.3s;pointer-events:auto}.back:hover{color:#ddd}.page-left,.page-right{background:#000;color:#fff}.page{position:absolute;top:0;overflow:auto;min-height:100%;width:75%;height:600px;font-size:1.4em}.page-right{left:25%;outline:#000 solid 5px;-webkit-transform:translateX(100%);transform:translateX(100%)}.splitlayout.open-right{background:#000}.page-left{left:0;outline:#fff solid 5px;text-align:right;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.splitlayout.open-left{background:#fff}.page-inner{padding:2em}.page-inner .section{padding-bottom:1em}.page-inner .h2s{margin:0 0 1em;font-weight:300;font-size:2em;font-family:audiowide}.page-inner p{font-weight:200;font-size:.8em}.page,.side{-webkit-transition:-webkit-transform .6s;transition:transform .6s}.overlay{-webkit-transition:opacity .6s,visibility .1s .6s;transition:opacity .6s,visibility .1s .6s}.intro-content{-webkit-transition:-webkit-transform .6s,top .6s;transition:transform .6s,top .6s}.intro-content h1,.reset-layout .page,.splitlayout.close-left .page-right,.splitlayout.close-right .page-left,.splitlayout.open-left .page-right,.splitlayout.open-right .page-left{position:absolute;overflow:hidden;height:600px}.splitlayout.open-left .page-left,.splitlayout.open-right .page-right{position:absolute;overflow:auto;height:600px}.open-left .side-right .overlay,.open-right .side-left .overlay{visibility:visible;opacity:1;-webkit-transition:opacity .6s;transition:opacity .6s}.open-right .side-left{-webkit-transform:translateX(-60%);transform:translateX(-60%)}.open-right .side-right{z-index:200;-webkit-transform:translateX(-150%);transform:translateX(-150%)}.open-right .side-right .intro-content{-webkit-transform:translateY(-50%) translateX(0) scale(.6);transform:translateY(-50%) translateX(0) scale(.6)}.open-right .page-right{-webkit-transform:translateX(0);transform:translateX(0)}.open-left .side-right{-webkit-transform:translateX(60%);transform:translateX(60%)}.open-left .side-left{-webkit-transform:translateX(150%);transform:translateX(150%)}.open-left .side-left .intro-content{-webkit-transform:translateY(-50%) translateX(-100%) scale(.6);transform:translateY(-50%) translateX(-100%) scale(.6)}.open-left .codropsheader{opacity:0;visibility:hidden;-webkit-transition:opacity .3s,visibility .1s .3s;transition:opacity .3s,visibility .1s .3s}.open-left .page-left{-webkit-transform:translateX(0);transform:translateX(0)}
The javascript being used for this site can be obtained from blueprint site listed above The two names of the javascript files are cbpSplitLayout.js and Classie.js, as well as the included modernizer.js file from the site.
Can anyone please help me figure out why javascript would stop once the plug-ins html is placed in the main wrapper section? Thanks in advance.
Well it's been a few days and I want to I guess provide my own answer to my question. I don't have the "exact" answer, however, this is what I have found to fix the issue. The original issue was that every time I placed my jquery coded html inside the main wrapper div, the jquery functions would not work at all. Basically I'm building a parallax one page site that has multiple slides. The second slide from the header has the jquery plug in that is suppose to have two profile pics on it. One side for the developer and one for the designer. When either profile is clicked, depending on which one, the plugin is suppose to make the page slide open either left or right. Upon clicking the "x" I put inside the inner page, the page refreshes and shuts the sliding profile.
I noticed that when this was placed inside the main wrapper div that the rest of my content was in, it ceased to function. I still cannot explain why that is. However, if I placed it on the outside of the wrapper, it would automatically become fixed at the top, blocking my fixed header. That I cannot explain either. I tried creating two different wrappers, one for the first slide, leaving the jquery code out of that wrapper, then another wrapper to place the remaining content in, but still the jquery code would just become fixed to the top of the screen and block the header. It would work, mind you, but completely wrong positioning. So... my solution, although perhaps not the right one to the issue, was to re-create all the html code. This time, I added each slide 1 at a time and messed about with the positioning finally getting the whole page to function correctly when in a relative position, aside from my header and footer being fixed. Now the plug-in works beautifully and the page is taking shape into what I wanted it to be. So... my conclusion, although I can't explain the details, is that when using a jquery plugin, the positioning of that part of html code that responds to the js, relies on positioning. Apparently the only positioning that would work in my case was relative. Another guess as to why this could be was because the plug-in was designed to be a one full page plug-in and I tweaked the html to get it to fit in a 1903px width by 600px height container. Hopefully this will help someone out there struggling with the same issue.
Im trying to put a background-image url of an lower div and add them to an higher div. The problem is, there are many lower divs with background-images and all of them has the same classname. Overall Im trying to build a parallax theme with drupal 7. The vision is to stream all of my news, put the background-image on 100vh, put the content in the middle in a white box and let them parallax scroll. I am working with views. I have one view which displays all news with fields: Title, Image, Body. The image-field is an background-image field, so the div where its normal displayed got the original-image url as background-image-url.
I just can't put the url of .bg-holder into .section.jumbotron. Or is there any other solution?
<div class="section jumbotron">
<div class="views-field views-field-title">
<h1 class="field-content">HEADLINE</h1>
</div>
<div class="views-field views-field-field-image">
<div class="field-content">
<div class="bg-holder" style="background-image: url(http://localhost/drupal/sites/default/files/styles/large/public/field/image/wallhaven-157066.jpg?itok=2BHBQSVa); background-attachment: scroll; background-size: 1903px;"></div>
</div>
</div>
<div class="views-field views-field-body">
<p class="field-content">LOREM</p>
</div>
</div>
Jfiddle of my Body:
http://jsfiddle.net/anLL1uop/2/
I'm not sure I 100% understand your question, but to change the background of 'jumborton', to that of a specific bg-holder, I would give each one a unique ID, so they can all have the same style (since they are the same class), but the ID lets you tell jQuery which background image you want. I would also set the background-image for each one in the css file, as opposed to doing
<div style="background-image: url(...);"
Here is a jsfiddle that shows you what I mean. It has the jQuery needed to change the background of the jumbotron to that of the clicked div, using its id.
https://jsfiddle.net/mahmudzero/anLL1uop/23/
Anyone knows how to put the image on this plugin in center? Because, with small images it appears always on left top.
On github it says nothing. https://github.com/elevateweb/elevatezoom
I probably have to find in the .js file where it creates the div or something.
I was able to center my images by placing everything in a div like the one below, however it's not centering the zoom on the "inner" zoomType when using a vertical image. Example: http://brecksargent.com/j/
<div id="wrapper" style="text-align: center">
<div id="yourdiv" style="display: inline-block;">
</div>
</div>