[the brink]

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

[sapana]

@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

[the brink]

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

[sapana]

@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

[the brink]

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

[the brink]

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

[Author]

Posts