I have tried to copy my section in the webpage as it is but when I copied my HTML5 code one below the previous it gave me an error, Such that the image in the first is at left and the text to right and I want it reverse for second section.
<div id="showcase-container">
<div class="showcase1">
<div class="col-2">
<img class="showcase1pic" src="images/apple.jpeg">
</div>
<div class="col-2">
<div class="feature-text">
<h1 class="section-title">Yes, it even looks good on an iPhone</h1>
<p class="section-left">It is important to make sure that you are coding for responsive design.We want all of our work to function property on all devices. This is the awesome way</p>
</div>
</div> <!-- End of Feature Text -->
</div>
</div>
<div id="showcase-container">
<div class="showcase1">
<div class="col-2">
<img class="showcase1pic" src="images/apple.jpeg">
</div>
<div class="col-2">
<div class="feature-text">
<h1 class="section-title">Yes, it even looks good on an iPhone</h1>
<p class="section-left">It is important to make sure that you are coding for responsive design.We want all of our work to function property on all devices. This is the awesome way</p>
</div>
</div> <!-- End of Feature Text -->
</div>
</div>
This is the image i want to display consecutively below it
This is the output I am getting
Related
I have created a website using the Bulma CSS framework for the styling. I also used the Bulma Carousel for a text carousel. I used the column feature in Bulma to have a carousel on the left of an image/video. This was working perfectly on my screen, until I wrapped the images in a tag with the class "image is-16by9" Now, the images are below the carousel. In addition, when the browser get small enough or I'm on mobile, the images get huge.
The goal is to have the images below the carousel and be scaled correctly on smaller devices and be larger and next to the carousel on desktops, along with the carousel.
.slick-prev::before,
.slick-next::before {
color: black !important;
}
.carousel {
overflow: hidden;
}
<section data-aos="fade-up" id="rendering" class="hero is-fullheight child">
<div class="hero-body">
<div class="container">
<div class="content is-large">
<h3>Title Here</h3>
<div id="columns is-vcentered">
<div class="column is-7">
<div class="3dCarousel">
<div class="item-1">
Item 1
</div>
<div class="item-2">
Item 2
</div>
<div class="item-3">
Item 3
</div>
</div>
</div>
<div class="column">
<figure class="image is-16by9">
<img
src="./images/render.png"
alt="Render"
/>
</figure>
</div>
</div>
</div>
</div>
</div>
</section>
The code gets an okay result on desktop, expect the images don't scale and aren't next to the carousel. I've been playing around with different fixes for a while but they either mess something else up or don't work at all.
Try adding is-mobile and is-multiline to your columns class
I have to make a User Page for our club website, but I am using Materialize CSS instead of Bootstrap. I am having a hard time making it responsive. My content gets displays weirdly, text goes out of the box and buttons get glued together.
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="container">
<div class="row">
<div class="col s12">
<div class="card horizontal hoverable" style="background: rgba(0, 0, 0, 0.3)">
<div class="card-image">
<img src="https://static.makeuseof.com/wp-content/uploads/2013/09/IE-automation8.png" style="width: 300px; height: 300px;">
</div>
<div class="card-stacked grey-text text-lighten-1">
<div class="row">
<div class="card-content" style="margin-top: -30px;">
<h3 class="light-blue-text"><b>Username</b></h4>
<p style="margin-top: -10px;">Developer</p>
<br>
<br>
<h5><b>Area of Interest</b></h4>
<p>HTML</p>
</div>
</div>
<div class="footer" style="margin-left: 5px; margin-bottom: 5px;">
<span><button class="btn #0d47a1 blue darken-4"><i class="fab fa-linkedin"></i> LinkedIn Profile </button></span>
<span><button class="btn #e65100 orange darken-4"><i class="fa fa-graduation-cap"></i>Profile </button></span>
</div>
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/devarshirawal0111/oj3nxLat/8/
Above link I have removed all attempts I made to make it responsive.
There were quite a few parts in your code that strayed from the materialize suggested structure.
1) In general, until you are familiar with what component you're working with, stick to the code samples:
<div class="row">
<div class="col s12 m7">
<div class="card horizontal">
<div class="card-image">
<img src="https://lorempixel.com/100/190/nature/6">
</div>
<div class="card-stacked">
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
</div>
</div>
</div>
Cards live in cols, which live inside rows.
2) Use card-action as your card footer, not .footer
There is no .footer class for cards. It is called .card-action:
<div class="card-action">
This is a link
</div>
3) Use .btn to give any element a button style:
<a class="btn" href="#" target="_blank"><i class="fa fa-graduation-cap"></i>Profile</a>
You had span > button > a - this is not necessary. Keep it simple. Any element can be made to look like a button just by adding .btn. Also, if your button text is too long, it will spill out or cut off. Not good. Make sure you're not putting unnecessary extra text into buttons. I took out the word 'profile' from linked in, the other solution would be to decrease font size or switch to a standard card to give more room for the footer.
4) Be careful what restrictions you're putting on your images, and also a standard card (image up top) can often work better. To make your image work better responsively, I took off the 300x height and instead gave it height:100% and object-fit:cover, which will fill the space better (object-fit is not supported in IE)
5) Lastly, gave your a tags a little margin so they have spacing when stacked on mobile.
Updated codepen here.
EDIT:
Added a second card example using Card Image, which places the card image at the top of the card.
https://materializecss.com/buttons.html
https://materializecss.com/cards.html
I would like to place my logo on the border of two divs. I've two questions:
In which div should I place this logo: in div above or in div below or maybe put in another div?
How can I position it. I tried absolute and relative but it doesn't work.
It should looks like:
HTML
<!-- Favorites -->
<section class="favorites">
<h2 class="favorites-header">Urban Favorites</h2>
<div class="favorites-box">
<img src="img/burger-craft-burgers-e1497746930767.png">
<div class="favorites-info">
<h2>Craft Your Own Burger</h2>
<p>Always get exactly what you want with this build-your-own classic. Always get exactly what you want with this build-your-own classic.</p>
</div>
</div>
<div class="favorites-box-last">
<img src="img/burger-craft-fries.jpg">
<div class="favorites-info">
<h2>Loaded Cheese Fries</h2>
<p>Always get exactly what you want with this build-your-own classic. Always get exactly what you want with this build-your-own classic.</p>
</div>
</div>
<!-- Here is my logo --> <img class="favorites-logo" src="img/urban8-logo-shadow.png" alt="logo-shadow">
</section>
<!-- Review -->
<section class="review">
<div class="review-element">
<p>"Great meals!"</p>
<img src="img/five-stars.png">
<p>-Jane Doe</p>
</div>
<div class="review-element">
<p>"Awesome atmosphere!"</p>
<img src="img/five-stars.png">
<p>-Aicia Fox</p>
</div>
<div class="review-element">
<p>"Everything is ok"</p>
<img src="img/five-stars.png">
<p>-Cesar Algir</p>
</div>
<button>Leave a Review</button>
</section>
My website shows different articles each in one thumbnail.
The problem is that the thumbnails seems to float everywhere. They are not aligned as it should be.
This is how my HTML code looks like.
</head>
<body>
<div class="top-bar">
<div class="logo"></div>
</div>
<div class="title-bar">
</div>
<br></br>
<div class="col-md-4">
<div class="thumbnail">
<img alt="300x200" src="[PIC]" width="300" />
<div class="caption">
<h3>
[Name]
</h3>
<p>
[Text]
</p>
<p>
<a class="btn btn-primary" href="index.php?action=DETAILE&id=[ID]">Go!</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
The result is that the columns are not aligned. There are 3 columns next to each other, but the height differs, as well the position on the page.
How can I solve this?
Now it looks like a staircase like in the code with the
I want:
Box 1. Box2. Box 3.
Bootstrap 3 column layout will be like
<div class="col-md-12">
<div class="row">
<div class="col-md-4">.col1</div>
<div class="col-md-4">.col2</div>
<div class="col-md-4">.col3</div>
</div>
</div>
To maintain equal height for all boxes assign equal height for all images,h3 and p tags(which are in the box)
Example snippet https://bootsnipp.com/snippets/featured/store-product-layout
and in your html code there are many closing < /div> tags check html validations once.
Ok so I have the following HTML
<div class="container">
<div class="row col-sm-12" id="productBrief">
<div id="RaspberryAndChocolate" style="display:none; height:200px;">
<div class="col-sm-6 text-center">
<img src="~/Content/Images/YogurtImages_404x290/Rasberry_White_Chocolate_Yogurt.png" class="img-responsive" style="margin: 0 auto; padding-top: 5%" alt="Rasberry White Chocolate Yogurt" />
</div>
<div class="col-sm-6">
<h2 class="raspberryRed productLineHeight">FLAVOUR #3</h2>
<h1 class="raspberryRed">
RASPBERRY &<br /> WHITE CHOCOLATE
</h1>
<p class="productPara">
A decadent combination of whole raspberries and smooth white chocolate that you will want to make last as long as possible. Teaspoon recommended.
</p>
<p>
<span class="label label-danone label-as-badge" style="font-size: 0.9em; padding:3%">VIEW ALL FLAVOURS</span>
</p>
</div>
</div>
<div class="clearfix"></div>
<div id="BlueBerry" style="display:none; height:200px;">
<div class="col-sm-6 text-center">
<img src="~/Content/Images/YogurtImages_404x290/Blueberry_Yogurt.png" class="img-responsive" style="margin: 0 auto; padding-top: 5%" alt="Blueberry Yogurt" />
</div>
<div class="col-sm-6">
<h2 class="blueBerry productLineHeight">FLAVOUR #6</h2>
<h1 class="blueBerry">
BLUEBERRY
</h1>
<p class="productPara">
Just imagine plump and juicy blueberries immersed in a deliciously creamy yoghurt. Enough said.
</p>
<p>
<span class="label label-as-badge" style="font-size: 0.9em; padding:3%">VIEW ALL FLAVOURS</span>
</p>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-lg-12 text-center">
<div class="col-lg-2"></div>
<p style="width:70%;" class="text-center col-lg-8">
Experiencing Ultimate's uniquely luscious texture for the first time is beyond words. So don't even try. Take a moment to enjoy the ultra creaminess, the juicy ripened fruits and an array of wicked indulgences that come together to create a yoghurt like no other.
</p>
<div class="col-lg-2"></div>
</div>
</div>
Now there are roughly about 8 different divs but for simplicity I am only showing 2, but only one div is shown look at it as a random affect so the user refreshes the page a different div is shown (this is done in jquery) but if you look at the bottom of the HTML you will see another row with a P tag this is what is causing he issue, when displayed on a desktop it shows like this
when I minimize the browser the text at the bottom of the image displays under the text located to the right hand side of the yogurt box as shown here.
I have added the clearfix, tried adding a new container and yet the problem still remains....
You are using invalid bootstrap grid. Col should be a child of row. Use correct grid and everything will work perfectly.
Scott, hunzaboy says you need to use the dive like this
<div class="row">
<div class="col-sm-12"></div>
</div>
I don't fully understand your question, but hope you asking this,
when re-sizing your first image, I will suitably re-size without any harm to other divs. For that You need to devide that into 3 main divs, check the below code
<div class="row">
<div class="col-md-6">This is the image holding div</div><div class="col-md-6"> this is the right side text "Flavour #6, etc..."</div>
<div class="col-md-12">This is the text on the bottom</div>
</div>
I will look, 2 columns on the top and one column in the bottom.
For mobile view, you can use col-xs-12class, the it will show as stack.
Hope this is you asking. Thanks