converting my project to fit in all devices - mobile, ipad and desktop #81586

Selyiah · 2023-12-23T12:42:44Z

Selyiah
Dec 23, 2023

Body

my project currently fits great at 100% view desktop version. However, when I zoom out, It separates itself and also when I inspect it on the web and view it through other devices measures, it doesn't fit well. Please help me community =]

So this is at 100% view desktop:

This is zoomed out at 25% desktop view:

This is responsive view on inspect settings:

How can I make my site responsive for all devices please?

Please see the following HTML, CSS, JS.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Group Project</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <!-- this link above has been taken from getbootstrap.com via CDN download, copied the top link -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="homepage.css"/>
</head>
<body>
    <div class="card">
        <div class="card-body">
            <h1 class="card-title">Discover London's Best: <br> Choose, Rate and Experience </br><br1> Your Favourites</br1></h1>
                <p class="card-text">With city recommendations from other hotspotters who <br> have tried and tested! </br></p>
                <div class="d-grid gap-2 d-md-block">
                <button class="btn btn-dark" type="button">Get Started</button>
                <button class="btn btn-light" type="button">Learn More</button>
              </div></div>
            <img src="feed-page.png" class="image" alt="image">
        </div>
    </div>
     
<!-- above is the title and below are the 3 images aligned -->

 <h2>Hotspots of the week!</h2>

 <main class="main-area">
        
  <div class="card-deck">

      <section class="cards">
          
          <article class="card-1">
              <a href="#">
                <div class="card-image">
                <picture class="thumbnail">
                    <img src="aged.jpg" alt="">
                </picture>
                </div>
              </a>
          </article> <!-- .card -->

          <article class="card-1">
              <a href="#">
                <div class="card-image">
                <picture class="thumbnail">
                    <img src="orange.jpg" alt="">
                </picture>
                </div>
              </a>
          </article> <!-- .card -->

          <article class="card-1">
              <a href="#">
                <div class="card-image-1">
                <picture class="thumbnail">
                    <img src="prima.jpg" alt="">
                </picture>
                </div>
             </a>
          </article> <!-- card --> 
        </div>
    </section>
    </main>

<!-- below is the text and image aligned -->

<div class="wrapper">
    <img src="5star.png" class="rounded" alt="">
    <text-box>
        <h1> Rate Your Favourite Places <br>★★★★★</br></h1>
        <p> The app for finding, rating and saving your favourite <br> London hotspots. Create your own profile, so you can </br> 
        <br1> easily access your favourite rated places! </br1></p>
    </text-box>
</div>

<!-- carousel below  -->

<div class="container-lg my-3">
    <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
        <!-- Carousel indicators -->
        <ol class="carousel-indicators">
            <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
            <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
            <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
        </ol>
        
        <!-- Wrapper for carousel items -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="review1.png" class="d-block w-100" alt="Slide 1">
            </div>
            <div class="carousel-item">
                <img src="review2.png" class="d-block w-100" alt="Slide 2">
            </div>
            <div class="carousel-item">
                <img src="review3.png" class="d-block w-100" alt="Slide 3">
            </div>
        </div>

        <!-- Carousel controls -->
        <a class="carousel-control-prev" href="#myCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#myCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>
</div>
</body>
</html>                            
  
  <!-- javascript link below  -->
  <script src="homepage.js"></script>
</body>
</html>

CSS:

.image {
	max-width: 550px;
	max-height: 550px;
	margin-right: 90px;
}

.card {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	border: none;
	border-bottom: 1px solid #808080;
	border-radius: 0%;
  
	& .card-body {
	  padding: 1rem;
	}
}

.card-body {
	margin-left: 90px;
}

body {
    margin: 50px;
}

/* this is the title section above and below is 3 images in a row  */

h2 {
    padding: 15px;
}


/* the abbr are to do with the background */
abbr,
acronym {
	border-bottom: 1px dotted #666; 
	cursor: help;
}

.card-1 {
	text-decoration: none;
	border: 1px solid #808080;
	border-radius: 5px;
} 

/* these two above are body */

.card-1:hover { 
	box-shadow: 3px 3px 8px hsl(0, 0%, 80%);    /* click and it takes you back to the top */
}

.card-image {
	width: 350px;
	height: 230px;
}

.card-image-1 {
	width: 370px;
	height: 230px;
}

.thumbnail img {
	object-fit: cover;
	width: 100%;
	border-radius: 5px;
}

/* Flexbox stuff */

.cards {
   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
   background: white;
   margin-bottom: 2em;	
}

/* below is the text and image aligned section */

* {
  margin: 0; 
  padding: 0;
  box-sizing: border-box;

}

.wrapper {
	display: flex; 
	justify-content: space-evenly;
	align-items: center;
	min-height: 50vh;
	border-bottom: 1px solid #808080;
	text-align: center;
}

.rounded {
	float: left;
	border: 1px solid #808080;
	border-radius: 5px;
	width: 540px;
}

/* below is carousel */

.carousel {
	border-bottom: 1px solid #808080;
}

.carousel-item{
	max-width: 700px;
	max-height: 700px;
	padding: 10px;
	margin-left: 260px;
}

/* media only below */

JS:

document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCarousel");

    // Create a carousel instance
    var myCarousel = new bootstrap.Carousel(element);

    btn.addEventListener("click", function(){
        myCarousel.cycle();
    });
});

Thank you community!

Guidelines

I have read and understood this category's guidelines before making this post.

Answered by ghost

Jan 7, 2024

I would Suggest the following ways:

Using Media Queries as others suggested. Remember this is the most powerful and common way to make your page responsive. Look into this tutorial of WDS this helped me, Tutorial.
Using vh or vw or % units wherever possible and preferable. As these are related to the screen resolution.
using display properties like flexbox or grid as this would actually help in the layout of items with ease. Mostly prefered to change these in media queries.
add fluidity to text.
min() and max() functions are your live savers at times.
Stacking the content in smaller devices would be much better than resizing images and other stuff except texts.
Remember if your stuck in …

View full answer

varunpats · 2023-12-23T12:52:56Z

varunpats
Dec 23, 2023

Hey, the project looks stunning on Desktop view. For other devices you need to use media queries in order to make your website/webapps responsive. Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport.

Media queries are not difficult to understand nor to implement. Please check this to get started with it.

Hope this helps. If you have further doubts, express them in the comments.

2 replies

varunpats Dec 23, 2023

In media queries, we only have to specify CSS for particular screen-size. Moreover, as you already set CSS for desktop, it won't take time to implement CSS for other devices.

For zoomed out desktop view max-width CSS properties will help you. The max-width property defines the maximum width of an element.

Selyiah Jan 4, 2024
Author

I don't know why I'm struggling to get it to be media responsive, I've tried adding codes and they don't seem to work, it still looks all jumbled. I added a max-width under the body section in CSS and nothing changed? I'm not sure what I'm missing here.

Thanks for your help so far and happy new year

MaorBezalel · 2024-01-07T17:52:00Z

MaorBezalel
Jan 7, 2024

Hey Selyiah,

As others have suggested, media queries are indeed what you're looking for, but it seems you're still having trouble with them. I highly recommend watching the following video here made by the very knowledgeable Slaying The Dragon. In the video, he demonstrate a really useful technique involving a container CSS class which is applied to the main sections of your website, alongside predefined media queries that take effect only when the width of this container class gets smaller or larger. I hope this information helps you.

1 reply

Selyiah Jan 15, 2024
Author

Thank you!

ghost · 2024-01-07T18:38:10Z

ghost
Jan 7, 2024

I would Suggest the following ways:

Using Media Queries as others suggested. Remember this is the most powerful and common way to make your page responsive. Look into this tutorial of WDS this helped me, Tutorial.
Using vh or vw or % units wherever possible and preferable. As these are related to the screen resolution.
using display properties like flexbox or grid as this would actually help in the layout of items with ease. Mostly prefered to change these in media queries.
add fluidity to text.
min() and max() functions are your live savers at times.
Stacking the content in smaller devices would be much better than resizing images and other stuff except texts.
Remember if your stuck in something make sure you seek help in Stack overflow of GitHub, cause a developer is the one who makes mistakes to develop...
Test out your changes and validate your files(optional).
Instead of using float try to use flexbox to force content to the edges. This would resolve the zooming out problem I Guess...

Tip

Try to learn media queries, as they are essential to ensure the performance of your site.

I hope I was helpful...Thank you @Selyiah

2 replies

Selyiah Jan 15, 2024
Author

Ok thank you! really helpful

ghost Jan 16, 2024

Your welcome, if I was helpful to you thats all I need .

All the very best

This comment was marked as off-topic.

Sign in to view

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GitHub Community

converting my project to fit in all devices - mobile, ipad and desktop #81586

{{title}}

Replies: 4 comments 5 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

This comment was marked as off-topic.

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

GitHub Community

converting my project to fit in all devices - mobile, ipad and desktop #81586

Selyiah Dec 23, 2023

Body

Guidelines

Replies: 4 comments · 5 replies

varunpats Dec 23, 2023

varunpats Dec 23, 2023

Selyiah Jan 4, 2024 Author

This comment was marked as off-topic.

MaorBezalel Jan 7, 2024

Selyiah Jan 15, 2024 Author

ghost Jan 7, 2024

Selyiah Jan 15, 2024 Author

ghost Jan 16, 2024

Selyiah
Dec 23, 2023

Replies: 4 comments 5 replies

varunpats
Dec 23, 2023

Selyiah Jan 4, 2024
Author

MaorBezalel
Jan 7, 2024

Selyiah Jan 15, 2024
Author

ghost
Jan 7, 2024

Selyiah Jan 15, 2024
Author