Problem: http://i.snag.gy/TYvi4.jpg
Fiddle: http://jsfiddle.net/CadDC/7/
As you can see in the problem image above, I would like to position the image alongside the title but keeping the structure of the html for a responsive layout.
<div class="listingWrapper clearfix">
<div class="headlineText">FLOAT: RIGHT</div>
<div class="subText">FLOAT: RIGHT</div>
<div class="logo">FLOAT: LEFT (ALONGSIDE HEADLINE)</div>
<div class="introduction">FLOAT: RIGHT</div>
Look at this fiddle: http://jsfiddle.net/caprella/7kbVX/
I propose to add one more wrapper .heading for .headlineText and .subText. It will give us opportunity to move the whole header. But that .heading steel needs fixed width:(
Check the Js fiddle
http://jsfiddle.net/CadDC/9/
<div class="listingWrapper clearfix">
<div class="logo">
<img class="listingImage" src="http://media-cdn.tripadvisor.com/media/photo-s/02/d0/d7/ed/hotel-du-vin-york.jpg" />
</div>
<div class="headlineText"><h2>Hotel name</h2></div>
<div class="subText">Mars - 0.7 miles from Mars City Centre</div>
<div class="introduction">
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 nost
</div>
</div>
Cant you just:
.listingImage{
max-width: 190px;
float: left;
}
I think this is your perfect answer http://jsfiddle.net/CadDC/14/ .
If you want it to be responsive you must give width and all in %.
Related
I'm new on programing and I'm studying HTML and CSS.
But today I have a issue that I can't figure how to solve:
I'm trying to add a background to a footer and it work pretty nice. But when I add "columns class" in some 'divs' it jusp stop works.
I'm adding two JS, first one whitout columns' class and a seccond one whit columns' class.
I know I'm doing something wrong, but I can't figure what.
First Code whit background working perfectly
Seccond Code whit background does't work
And I'm puting here my HTML code:
<footer>
<div class="footer">
<div class="container">
<div class="six columns">
<h3>Nossa História</h3>
<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.</p>
</div>
<div class="three columns">
<h3>Contato</h3>
<ul>
<li>- 38 99999-9999</li>
<li>- contato#bikcraft.com</li>
<li>- Salinas - MG</li>
</ul>
</div>
<div class="three columns">
<h3>Redes Sociais</h3>
<ul>
<li><img src="img/facebook-icone.svg" alt="Ícone Facebook"></li>
<li><img src="img/instagram-icone.svg" alt="Ícone Instagram"></li>
<li><img src="img/youtube-icone.svg" alt="Ícone Youtube"></li>
</ul>
</div>
</div>
</div>
</footer>
And my CSS code:
.footer {
color: #fefefd;
background: #191f28;
}
This question already has an answer here:
Media query in responsive email template
(1 answer)
Closed 3 years ago.
I'm setting up an email which contains in the body a picture and some text. On normal computer screens the image is to the left and the the associated text to the right (using inline-block).
This looks like so:
(https://www.flickr.com/photos/183424995#N08/48518551371/in/dateposted-public/)
When the screen size is changed ie. for an i-phone, I'm aiming to get the text to move underneath the image and rather than just having a width of half the screen (as it's inline-block), to take up the whole width of the screen underneath.
What I'm trying to get:
https://www.flickr.com/photos/183424995#N08/48518549646/in/dateposted-public/
What is actually happening:
https://www.flickr.com/photos/183424995#N08/48518724692/in/dateposted-public/
I've created a "main" div containing the image div, and a div containing the text, both inline-block. The "main" div has a width set to 100% and the text div has a min and a max div so it can move from next to the image to under the image depending on screen width.
I've tried rejigging the max width of the text div to be wider, but then the text never remains to the side of the image. And I'm trying to avoid floating anything.
I can't use bootstrap or flexbox as it's an email so am limited to fairly basic CSS.
The JSFiddle is https://jsfiddle.net/cfn76vqz/ to show what kind of responsiveness I have so far. And the general HTML structure is as below.
<div id="main">
<div id="left">
<div >
<img src="https://via.placeholder.com/300x200/0000FF/FFFFF" />
</div>
</div>
<div id="right">
<div >
<span>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.</span>
</div>
</div>
</div>
TLDR: I'm stumped on how to make the text div essentially be 100% of the width if underneath the image but also 50% if there's space to have it to the side of the image. As far as I understand it's always going to be limited to 50% as it's part of an inline-block section.
Because you set width with this why it's not fully of width
max-width: 50%;
So... How we can do
We need to use FLEX display
like this
#main {
/*---HERE---*/
display: flex;
flex-wrap: wrap;
/*----------*/
background: yellow;
width: 100%;
}
#left {
background: orange;
}
#right {
/*---HERE---*/
flex-basis: 0;
flex-grow: 1;
min-width: 50%;
/*----------*/
background: green;
vertical-align: top;
}
<!-- YOUR OLD CODE -->
<div id="main">
<div id="left">
<div>
<img src="https://via.placeholder.com/300x200/0000FF/FFFFF" />
</div>
</div>
<div id="right">
<div>
<span>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.</span>
</div>
</div>
</div>
if you want to learn about flex ...more here
you can use viewport units like width: 100vw and height: 100vh for make it responsive depending upon height and width of display.click here
unaligned images and text
I have attempted to input suggestions from previous questions but it just seems I have been able to successfully find the correct way to align these images with their text underneath.
<section id="boxes">
<div class="container">
<div class="box">
<img src="./images/dayporter2.jpeg">
<h3>DAYPORT</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<img src="./images/floorcare1.jpeg">
<div class="box">
<h3>FLOOR CARE</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="box">
<img src="./images/janitor2.jpeg">
</div>
</section>
/* boxes */
#boxes{
margin-top: 20px;
}
#boxes .box{
float: left;
text-align: center;
width: 30%;
padding: 10px;
}
#boxes .box img{
width: 90px;
}`
You seem to have an unnecessary div tag.
remove the div tag after your 'floorcare1.jpeg' img, here:
<img src="./images/floorcare1.jpeg">
<div class="box"> //remove this
<div class="box">
<img src="./images/floorcare1.jpeg">
<div class="box"> <!-- The probleme is here -->
<h3>FLOOR CARE</h3>
Because the .box element which is direct below the image is float left, it will force the image to be float left, because their sibling .box take 30% of the parent and there are remaining 70% width of their .box parent element. You must remove the .box element and every thing will work like you expecting.
Another problem you must close all you open markup
<section>
<div class="container">
<div class="box">
<!-- First box -->
</div>
<div class="box">
<!-- Second box -->
</div>
<div class="box">
<!-- Third box -->
</div>
</div>
</section>
Between:
<h2>Menu</h2>
and
<h5>Hover to see more!</h5>
I have this huge gap, is there a way to remove it?
For more references this is my code before heading 2:
<div class="container">
<img src="Lato Font Test.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text"><p>About Us // Origin</p><p>Sample Text</p><p>Sample Text</p><p>Sample Text</p></div>
</div>
</div>
<br></br>
And after heading 5:
<ul id="accordion">
<li>
<h2>MENU // SOUPS</h2>
<div class="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.</p>
</div>
</li>
Picture Reference: http://i.imgur.com/Imc3DPb.png
Thanks in advance!
One of your elements has a default padding or margin. You can inspect your elements with your browsers dev tools to figure out which if not both is causing the issue. Adjust your paddings and margins using padding: x; and margin: x; x being the amount of pixels [ex. 5px] you want.
I've noticed that StackOverflow resorted to using a table-based layout for the comments area beneath posts:
Notice how the text all stays to the right of the button area, regardless of how many lines of text there are. I am trying to accomplish the same effect using a table-less layout, and failing miserably. Is there any good way to do achieve this without tables?
I think this is a good start:
<div class="comment-row">
<ul class="icon-set">
<li class="icon-1">icon</li>
<li class="icon-2">icon</li>
</ul>
<div class="comment">
<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.</p>
</div>
</div>
CSS:
.comment-row { position relative; }
.icon-set { position: absolute; }
.icon-set a {
display: block;
text-indent: -99999px;
border: 1px solid;
width: 16px;
}
.comment { margin-left: 30px; }
Live Sample:
http://jsfiddle.net/HPbFJ/
.sidebyside { float: left}
<div class="sidebyside">
<input type="button" value="VoteUp" /><br />
<input type="button" value="Flag" />
</div>
<div class="sidebyside">Text</div>
Isn't it just as simple as this?
EDIT
Your example (fixed):
<div style="overflow: hidden;">
<div style="float: left;">Left Content</div>
<div style="float: left; width: 100px;">Right Content Right ContentRight Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content </div>
</div>
Alternate solution: http://jsfiddle.net/7JukV/
Just for the sake of alternatives... :)