How can I show the things I searched from Google Search Engine in the card layout?

Question

I created a search engine with Google search engine and added it to my project. However, I am currently stuck. I want to stylize the results in a card layout and show them side by side. How can I achieve this?

 HTML: 
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Book Finder</title>
        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
        <div class="header">
            <div id="title">
                Book Finder
            </div>
        </div>
        
        <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Cormorant:wght@300&family=Fira+Code:wght@500&family=Josefin+Slab:wght@200&family=Kanit:wght@300&family=MedievalSharp&family=Mulish&family=Radio+Canada:wght@300&family=Smythe&family=Zen+Dots&display=swap" rel="stylesheet">
        <script async src="https://cse.google.com/cse.js?cx=d4f7eccee00f1434d">
        </script>
        <div class="gcse-search"></div>
    </body>
    </html>
    
    >      .gsc-result-info {
    >         /* background-color: red; */
    >         font-family: 'Kanit', sans-serif;;
    >         color: blue;
    >     }
    >     
    >     .gs-title {
    >        font-family: 'Kanit', sans-serif;
    >        
    >         height: 100%;
    >         width: 100%;
    >         position: relative;
    >         transition: transform 1500ms;
    >         transform-style: preserve-3d;
    >       
    >        
    >     }
    >     
    >     .gsc-cursor-page {
    >         font-size: 1.5em;
    >         padding: 4px 8px;
    >         border: 2px solid #ccc;
    >           
    >     
    >       }
    >     
    >       .gs-image-box gs-web-image-box gs-web-image-box-portrait {
    >         height: 100%;
    >         width: 100%;
    >         position: relative;
    >         transition: transform 1500ms;
    >         transform-style: preserve-3d;
    >       }

My aim is to shape the outputs as I want, put them side by side and display them in the layout. But I can't do what I want.

Answer 1

Use the following property in the class of the result wrapper.

float:left;
display:inline-block;

How can I show the things I searched from Google Search Engine in the card layout?

Question

1 answers

solution1
0 2022-12-04 09:27:09

How can I show the things I searched from Google Search Engine in the card layout?

Question

1 answers

solution1 0 2022-12-04 09:27:09

solution1
0 2022-12-04 09:27:09