Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 3, 2019 at 1:58 pm #181180
    the brink
    Participant

    Hey,

    So I’ve got a question that may well be out of the remit of this forum but I’ll post anyway in case you can help me.

    The page I need help with is this one.

    So I have created these three boxes with the following code (some of it may be unnecessary, I am still playing around with it based on some examples I found):

    * {
    box-sizing: border-box;
    }

    .box {
    float: left;
    width: 33.33%;
    padding: 50px;
    }

    .clearfix::after {
    content: “”;
    clear: both;
    display: table;
    }

    .flex-container {
    display: flex;
    flex-wrap: nowrap;
    background-color: transparent;
    }

    .flex-container .box {
    background-color: #f1f1f1;
    width: 33.33%;
    margin: 10px;
    text-align: center;
    }

    And I’ve tried to make them responsive (i.e. stack up above each other when on a smaller screen with left element at the top and right element at the bottom) with the following code:


    @media     screen and (max-width:800px) {
    .flex-container .box {
    width:100%;
    }
    }

    But instead they just seem to hover off the page.

    Is there a way I can fix this?

    Thanks

    TB

    September 4, 2019 at 12:32 am #181200
    sapana
    Participant

    @the-brink:Hello blink, Can you please add this css code in your previous code. You need to just replace the display, width and margin value in your code, place the other remaining same. Please follow this steps:
    Go to=> Appearance=> Customize=> Additional CSS=> add the following css code

    .flex-container {
    display: block !important;
}

.flex-container .box {
    width: 31.33% !important;
    margin: 1% !important;
}

    let me know if this works out!

    Kind Regards,
    Sapana

    September 4, 2019 at 1:09 am #181206
    the brink
    Participant

    Hi Sapana,

    So I’ve replaced that code as suggested, but all it has done is stopped the boxes from extending off the page. Instead, their width gets smaller and smaller until the text is illegible.

    Any other ideas as to how to get the boxes to align top to bottom when the screen gets smaller?

    Bear in mind that I have kept all the code that I shared in my first post only changing the lines that you suggested. There’s ceratainly some of those lines of code that could be deleted.

    Thanks

    TB

    September 4, 2019 at 2:35 am #181223
    sapana
    Participant

    @the-brink: Can you provide me your site admin access if that okay? So, that I can make the possible changes you have asked for I will shortly contact you by mail.

    Kind Regards,
    Sapana

    September 4, 2019 at 2:43 am #181226
    the brink
    Participant

    How should I do that? To be honest I’d prefer to make the changes myself so I understand what I’m doing

    September 4, 2019 at 2:47 am #181227
    the brink
    Participant

    here’s a link to a full copy of my css file

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Making new elements responsive’ is closed to new replies.