I am looking for code block to change image tumbnail position in WordPress theme folder.
The position what I want is , I want image tumbail is left side of Same div.row and Post's Title and Entry will be Right side of same "div.row" Element. I just want to know how to set it."
<div class="row">
<div class="foo">
<div class="bar">
<img src="images/myimage.png" alt="" titl="">
</div>
</div>
<div class="foo2">
<div class="bar2">
<h1 class="mytitle">What am I doing?</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a>Read More</a>
</div>
</div>
</div>
Related
Code:
<div class="panel panel-default">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapseOrderItems1"> Products 1 <i class="chevron fa fa-fw" ></i></div>
<div class="collapse" id="collapseOrderItems1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapseOrderItems2"> Products 2 <i class="chevron fa fa-fw" ></i></div>
<div class="collapse" id="collapseOrderItems2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
.panel-heading .chevron:after {
content: "\f078";
}
.panel-heading.collapsed .chevron:after {
content: "\f054";
}
Codepen: https://codepen.io/anon/pen/PPxOJX
I'm not sure if it's possible. I'm only able to move the whole entire chunk around. I'm having trouble just moving the collapsible icon.
You can update your HTML code to place your icon before the text :
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapseOrderItems1"> <i class="chevron fa fa-fw" ></i> Products 1 </div>
I am trying to build a responsive gallery with images and accompanying text descriptions. Images and their text should sit side-by-side on the same row, unless the width is too small and everything is collapsed to a single column. My only issue is that in the single column mode, I would like the images to be aligned on their left to the wider text. Everything else is perfectly aligned and centered as I want.
I understand that flex is not supposed to do what I want, and I tried replacing the inner flex with a grid, but could not make it work. I would be happy to learn both about the easiest way to fix this (preferably without media queries), and more generally, what would be the correct approach to this. Most importantly, I would not like to be required to introduce new arbitrary numbers, other than the width of the image, and of the text element, and the given gaps. I would have guessed that such a design would be a common enough use case, but apparently lacking the correct terminology, I could not find reference implementations.
https://jsfiddle.net/tj13y7sc
Edit: The most promising directions seem to me:
For an easy fix: Giving the image the same width as the text, and using a negative(?) margin to fix the horizontal gap when they are on the same row.
For the right way to do it: Replacing the inner flex with a grid - but i could not got it to not collapse all the time.
4 columns - good:
2 columns - good:
1 column - misaligned:
.flex_container {
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:64px 128px;
}
.flex_container_item {
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:64px;
}
.text {width:360px;}
<div class="flex_container">
<div class="flex_container_item">
<img src="https://via.placeholder.com/250" width=256>
<div class="text">
<h1>description1</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="flex_container_item">
<img src="https://via.placeholder.com/250" width=256>
<div class="text">
<h1>description2</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="flex_container_item">
<img src="https://via.placeholder.com/250" width=256>
<div class="text">
<h1>description3</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="flex_container_item">
<img src="https://via.placeholder.com/250" width=256>
<div class="text">
<h1>description4</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
Just change the second class justify-content to "left" as:
.flex_container_item {
display:flex;
flex-wrap:wrap;
justify-content:left;
gap:64px;
}
Here's what it looks like (not allowed to upload images here yet..)
Your width of img and div container of text are different, try keeping it same and it will be properly align.
Or if you want that specific width of text container.
Then use media query and change flex-direction to column for smaller screens.
Seems like adding the next condition might do the trick -
.flex_container_item img {
border: 1px solid blue; /* just for test */
margin-left: 0;
margin-right: auto;
}
see here: https://codepen.io/elicohenator/pen/MWjpgze
Now I just wanting to know you that I bind <img> in a <div class="image"> </div> and then make some CSS changes, and also add a media query for the responsiveness.
I also add comments in CSS file what I have make change.
The following is the code snippet that you want.
.flex_container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 64px 128px;
}
.flex_container_item {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 64px;
}
.text {
width: 100%;
/*value change*/
max-width: 360px;
/*new property add*/
}
/*new code added*/
/*use 720px media width because we have to fix .image class width same as we have already set for .text class so that they align at the same edge. so now total width for both the blocks is 360px + 360px = 720px.*/
#media(max-width: 720px) {
.image {
width: 100%;
max-width: 360px;
}
}
<div class="flex_container">
<div class="flex_container_item">
<div class="image">
<img src="https://via.placeholder.com/250" width=256>
</div>
<div class="text">
<h1>description1</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="flex_container_item">
<div class="image">
<img src="https://via.placeholder.com/250" width=256>
</div>
<div class="text">
<h1>description2</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="flex_container_item">
<div class="image">
<img src="https://via.placeholder.com/250" width=256>
</div>
<div class="text">
<h1>description3</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="flex_container_item">
<div class="image">
<img src="https://via.placeholder.com/250" width=256>
</div>
<div class="text">
<h1>description4</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
surround the <img> tag with a div as such:
<div class="flex_container">
<div class="flex_container_item">
<div class="image">
<img src="https://via.placeholder.com/250" width=256>
</div>
<div class="text">
.
.
.
and add to the css:
.image {
width:360px
}
like this:
https://jsfiddle.net/860c4tfj/
Solved by me!
Wrap the img with a div named "image".
Set div "image" width to 360px (same as text) - this will fix single column mode, but now the gutter is too large by 360-256=104px.
To fix this we add to both image and text divs: margin: 0 -52px; - this will fix the gutter by -52*2=-104, while keeping everything symmetric.
Finally we add margin: 0 52px; to .flex_container_item, to cancel out the effect the previous step on the outer margins.
https://jsfiddle.net/yt0pfnje/
Takeaways:
Never give up. Never surrender. I am ashamed to admit how many hours I've put into this. But hey, now I know how to use flex, grid and margins.
This would have been so much easier if gap could take negative values. Can anybody help suggest this to the spec?
I still could not make it work with grid. I believe it is not possible due to the way auto-fill works
CSS is broken. It should not be so difficult. It should not take so long to solve. The other attempted answers were suggested by first-class web experts who could still not get it right. I now believe there is no simpler way. But there should be.
I'm playing around with Bootstrap and considering using a single row and column wrapping for my design. The reason for this is because I want to reorder the elements depending on the screen size. Current code is as follows:
<div class="container">
<div class="row">
<div class="col-12 nav-bar">
Navigation
</div>
<div class="col-12 header">
Header
</div>
<div class="col-12 content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
adminim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.
</div>
<div class="col-6 feature sign-up">
Sign up
</div>
<div class="col-6 feature feature-1">
Feature 1
</div>
<div class="col-6 feature feature-2">
Feature 2
</div>
<div class="col-6 feature feature-3">
Feature 3
</div>
</div>
</div>
Is it possible to make the third column content the first column for the lg screen size? I see the order class lets you assign order based from 1-12. I tried using <div class="col-12 content order-md-1"> but it made it the last element, not the first.
The following css will do the trick.
You are basically implementing the order-first class manually but only for large screens
#media (min-width:1200px){
.content{
order:-1;
}
}
heres a codepen you can play with
https://codepen.io/mugwag/pen/VwvpNRV
I have this image that floats right, with some text around it:
<img class="img-responsive" style="float:right;" src="https://assets.ifttt.com/images/channels/1352860597/icons/on_color_large.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
As you can see, I've tried to use the img-responsive class. But despite this, on tiny screens, the image squeezes up the text that is next to it. This looks very messy and I wonder if there's any way to make the image expand to take up the full width on XS devices?
There are a lot of answers :
With media queries :
Bootply : http://www.bootply.com/9R942IK2VC
HTML:
<div class="container">
<img class="img-responsive mypic" src="https://assets.ifttt.com/images/channels/1352860597/icons/on_color_large.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
CSS:
#media screen and (min-width:769px) {
.mypic {float:right;
}
With duplicated pic :
Bootply : http://www.bootply.com/dAWJyzJBeQ#
HTML
<div class="container">
<img class="img-responsive hidden-xs" style="float:right;" src="https://assets.ifttt.com/images/channels/1352860597/icons/on_color_large.png">
<img class="img-responsive visible-xs" src="https://assets.ifttt.com/images/channels/1352860597/icons/on_color_large.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
With Bootstrap Grid System See ZimSystem answer
Use the grid instead of float:right..
<div class="row">
<div class="col-sm-3 col-sm-push-9"><img class="img-responsive center-block" src="https://assets.ifttt.com/images/channels/1352860597/icons/on_color_large.png"></div>
<div class="col-sm-9 col-sm-pull-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
http://www.codeply.com/go/BB90AS1Cb3
Is it possible to create a scrollable nested div on a jQuery mobile site? Basically I want a fixed header and footer but the middle section to be scrollable. I tried setting overflow:scroll (and I've set the width and height of the div) but it doesn't seem to work correctly in my iOS simulator. (I would do a jsFiddle but it doesn't work for the jQuery mobile stuff)
Here's the HTML:
<body>
<div data-role="page">
<div data-role="header">
<div id="header_image">
<img src="images/top_logo.png" />
</div>
</div><!-- /header -->
<div id="content_bg">
<div data-role="content">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!-- /content -->
</div><!-- /content_bg -->
<div data-role="footer" data-theme="b">
<div id="footer_text">
<center><h4>Page Footer</h4></center>
</div><!-- /footer_text -->
</div><!-- /footer -->
</div><!-- /page -->
Here's the relevant CSS:
#content_bg{
background-color:#0038a5;
height:310px;
width:100%;
text-size:11px;
color:white;
overflow: scroll;
}
Thanks for any light you can shine on this problem!
There are many solutions including: iScroll, Flexscroll, jQuery scrollview experiment, and others (these ones I have used successfully).
I found Flexscroll the easiest to setup and they are all about the same code-weight.
iScroll 4 -> http://cubiq.org/iscroll-4 (Make sure you investigate the lite version as it has a smaller code-weight and still does the basic functions)
Flexscroll -> http://www.hesido.com/web.php?page=customscrollbar (I like this one, it's original purpose is to create custom scrollbars but it supports touch events for scrollable areas on mobile devices)
jQuery Mobile Scrollview -> http://jquerymobile.com/test/experiments/scrollview/ (created by the jQuery Mobile team)
UPDATE
I've answered a number of iScroll related questions on StackOverflow, here is a link to view them (in-case you run into problems using iScroll): https://stackoverflow.com/search?q=user%3A752738+%5Bjquery-mobile%5D+iscroll&submit=search
iScroll is your solution. Check its website
http://cubiq.org/iscroll-4