four responsive divs for homepage

  • i am trying to create four responsive divs for homepage; i want to create divs like in siteground but not slideshow on mobile; divs simply apear below each other on mobile
    here is my html:

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" media="all" href="div.css">

<div class="homepage-div-container">
        <div class="div">
            <div class="homepage-block">
                <img class="icon-dim" />
                <h2>Heading</h2>
                <h6>Sub-Heading</h6>
                <p>This is responsive paragraph. Text would not move out of div as below aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.</p>
                <button class="bttn"><a href="#" role="button">Buy Now Item</a></button>
            </div>    
        </div>
        <div class="homepage-div">
            <div class="homepage-div block">
                <img class="icon-dim" />
                <h2>Heading</h2>
                <h6>Sub-Heading</h6>
                <p>This is responsive paragraph. Text would not move out of div as below aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.</p>
                <button class="bttn"><a href="#" role="button">Buy Now Item</a></button>
            </div>    
        </div>
        <div class="homepage-div">
            <div class="block">
                <img class="icon-dim" />
                <h2>Heading</h2>
                <h6>Sub-Heading</h6>
                <p>This is responsive paragraph. Text would not move out of div as below aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.</p>
                <button class="bttn"><a href="#" role="button">Buy Now Item</a></button>
            </div>    
        </div>
        <div class="homepage-div">
            <div class="block">
                <img class="icon-dim" />
                <h2>Heading</h2>
                <h6>Sub-Heading</h6>
                <p>This is responsive paragraph. Text would not move out of div as below aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.</p>
                <button class="bttn"><a href="#" role="button">Buy Now Item</a></button>
            </div>    
        </div>
</div>

    here is the css:

    *{
    padding: 0%;
    margin: 0%;
}
.homepage-div-container{
    width: 100%;
    position: absolute;
    font-size: 18px;
    font-family:"Helvetica Neue";
    text-align: center;
}
.homepage-div{
    text-align: center;
    display: inline-block;
    width: 270px;
    padding: 10px;
    margin: auto;
    word-wrap:break-word;
}
.homepage-div block{
    padding: 20px;
    box-shadow: 2px 2px 8px 1px #cccccc;
    border: solid 1px #cccccc;
    border-radius: 2px;
}
.homepage-div bttn{
    background-color: #0085ba;
    border-radius: 5px;
    border: none;
    padding: 10px;
    margin: 20px;
}
.homepage-div bttn:hover{
    opacity: 0.8;
}
.homepage-div icon-dim{
    background-image: url("image.png");
    width: 100px;
    height: 100px;
}
.homepage-div a{
    text-decoration: none;
    color: white;
    font-size: 16px;
}
.homepage-div h2{
    font-size: 28px;
    opacity: 0.90;
    font-weight: 600;
    margin: 5%;
    margin-bottom: 6px;
}

.homepage-div h6{
    font-size: 17px;
    padding: 0px;
    margin: 0px;
    margin-bottom: 20px;
    opacity: 0.6;
}
@media screen and (max-width:1180px){
    .div{
    text-align: center;
    display: inline-block;
    width: 400px;
    padding: 10px;
    margin: auto;
    word-wrap:break-word;
}
}
@media screen and (max-width:500px){
    .div{
    text-align: center;
    display: inline-block;
    width: 300px;
    padding: 10px;
    margin: auto;
    word-wrap:break-word;
}
}

    its not working

    • This topic was modified 4 years, 9 months ago by zohaibkhan5.
Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi there,

    try this for your HTML structure and classes:

    <div class="flex-container">
    <div class="flex-item">
        <div class="flex-item-inner">
            Add your content here
        </div>
    </div>
    <div class="flex-item">
        <div class="flex-item-inner">
            Add your content here
        </div>
    </div>
    <div class="flex-item">
        <div class="flex-item-inner">
            Add your content here
        </div>
    </div>
    <div class="flex-item">
        <div class="flex-item-inner">
            Add your content here
        </div>
    </div>
</div>

    and this for your CSS – it will display 4 columns desktop, 2 on tablet and 1 on mobile:

    /* Make Flex container on Tablet and larger */
@media(min-width: 769px) {
    .flex-container {
        display: flex;
        flex-wrap: wrap;
    }

    /* 2 Column for tablet */
    .flex-container .flex-item {
        flex: 1 0 50%;
    }
}

/* 4 colum desktop */
@media (min-width: 1024px) {
    .flex-container .flex-item {
        flex: 1 0 25%;
    }
}

/* Style Flex item */
.flex-item-inner {
    padding: 10px;
    margin: 10px;
    background-color: red;
}
    Thread Starter zohaibkhan5

    (@zohaibkhan5)

    i have tried your code its working but have issues check pls:

    <div class="flex-container">
    <div class="flex-item">
        <div class="flex-item-inner homepage-div homepage-div-shadow">
             <img class="homepage-div-icon"/>
                <h2>Heading</h2>
                <h6>Sub-Heading</h6>
                <p>This is responsive paragraph. Text would not move out of div as below .</p>
                <button class="bttn"><a href="#" role="button">Buy Now Item</a></button>
        </div>
    </div>
    <div class="flex-item">
        <div class="flex-item-inner homepage-div homepage-div-shadow">
                <img class="homepage-div-icon" />
                <h2>Heading</h2>
                <h6>Sub-Heading</h6>
                <p>This is responsive paragraph. Text would not move out of div as below .</p>
                <button class="bttn"><a href="#" role="button">Buy Now Item</a></button>       
        </div>
    </div>
    <div class="flex-item">
        <div class="flex-item-inner homepage-div homepage-div-shadow">
                <img class="homepage-div-icon" />
                <h2>Heading</h2>
                <h6>Sub-Heading</h6>
                <p>This is responsive paragraph. Text would not move out of div as below .</p>
                <button class="bttn"><a href="#" role="button">Buy Now Item</a></button>        
         </div>
    </div>
    <div class="flex-item">
        <div class="flex-item-inner homepage-div homepage-div-shadow">
               <img class="homepage-div-icon" />
                <h2>Heading</h2>
                <h6>Sub-Heading</h6>
                <p>This is responsive paragraph. Text would not move out of div as below .</p>
                <button class="bttn"><a href="#" role="button">Buy Now Item</a></button>       
         </div>
    </div>
</div>

    css:

    /*homepage-div*/
.homepage-div-container{
    width: 100%;
    position: absolute;
    font-size: 18px;
    font-family:"Helvetica Neue";
    text-align: center;
}
.homepage-div{
    text-align: center;
    display: inline-block;
    width: 270px;
    padding: 10px;
    margin: auto;
    word-wrap:break-word;
}
.homepage-div-shadow{
    padding: 20px;
    box-shadow: 2px 2px 8px 1px #cccccc;
    border: solid 1px #cccccc;
    border-radius: 2px;
}

.homepage-div-icon{
    background-image: url("image.png");
    width: 100px;
    height: 100px;
}
.homepage-div a{
    text-decoration: none;
    color: white;
    font-size: 16px;
}
.homepage-div h2{
    font-size: 28px;
    opacity: 0.90;
    font-weight: 600;
    margin: 5%;
    margin-bottom: 6px;
}
.homepage-div h6{
    font-size: 17px;
    padding: 0px;
    margin: 0px;
    margin-bottom: 20px;
    opacity: 0.6;
}
@media(min-width: 769px) {
    .flex-container {
        display: flex;
        flex-wrap: wrap;
    }

 /* 2 Column for tablet */
    .flex-container .flex-item {
        flex: 1 0 50%;
    }
}
/* 4 colum desktop */
@media (min-width: 1024px) {
    .flex-container .flex-item {
        flex: 1 0 25%;
    }
}
/* Style Flex item */
.flex-item-inner {
    padding: 22px;
    margin: 20px;
    background-color: white;
}
    • This reply was modified 4 years, 9 months ago by zohaibkhan5.
    Thread Starter zohaibkhan5

    (@zohaibkhan5)

    see this live example testfellow

    • This reply was modified 4 years, 9 months ago by zohaibkhan5.
    • This reply was modified 4 years, 9 months ago by zohaibkhan5.
    Leo

    (@leohsiang)

    Hi there,

    This isn’t a theme related issue at all so we can’t support it here as this is a support forum for the free GeneratePress theme.

    If you aren’t able to figure out how to do that with custom coding then I would highly recommend using the grid, heading and button blocks from GenerateBlocks:
    https://generateblocks.com/

    You will be able to re-create the example from Siteground without writing any HTML and CSS at all and it will also be responsive by default.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘four responsive divs for homepage’ is closed to new replies.