Sti;; learning, please help

User 2889897 Photo


Trial User
1 post

How do I make this code fit to my laptop screen and be responsive? I have tried things several times and just cant make it work. It is almost double my screen size and the words in the class section of each image shows underneath them. I tend to learn while doing but starting to get frusterated, Thank you for your time and assistance.

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Sat, 16 Oct 2021 16:51:27 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../../Desktop/test2/images/hero_1.jpg""class="btn btn-default btn-sm" style=""/>
</div>
<div class="carousel-item">
<img src="../../Desktop/test2/images/hero_2.jpg"/>" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="../../Desktop/test2/images/hero_3.jpg" />class="d-block w-100" alt="...">
</div>
<img src="../../Desktop/test2/images/hero_4.jpg"/>" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="../../Desktop/test2/images/hero_5.jpg"/>" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="../../Desktop/test2/images/hero_6.jpg" />class="d-block w-100" alt="...">
</div>
<img src="../../Desktop/test2/images/hero_7.jpg"/>" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</body>
</html>
User 122279 Photo


Senior Advisor
14,029 posts
Online Now

Where did you get the code from? Surely there must also be some style sheets (.css files) to go with this. And maybe some javascript (.js files)

To me, it looks like some kind of Bootstrap slideshow. But since the images clearly are sitting on your own desktop, I cannot see them and find out what size they are.

If you can provide the source of your code (URL to the original), it should be possible to help you.
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com


User 3085877 Photo


Guest
1 post

I agree with man upper, we need a source of code to analyze your problem:cool:

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.