Column content not stacking on mobile version of website

[MP41]

I'm having some trouble trying to correct what appears to be a glitch on my Weebly website. It was built using a responsive theme, but on the mobile version of the website the columns do not stack, and instead appear as they do on the desktop version of the website. This creates images and sections of text that are only 1cm wide on a mobile screen, making them illegible.

I've understood from other threads that responsive themes should stack content on the mobile version of the website automatically, so that on a mobile the content appears as a single column, and so I'm wondering if this is an error with the theme or something else.

I've seen some Weebly apps like Hide and Column lock that appear to be designed to make mobile websites not stack, but nothing to solve the issue the other way around.

Any help would be much appreciated!

[whitemonkey]

@MP4    pls share your URL

[MP41]

Hi, thanks for the response, this is the URL: http://www.d6culture.org

[whitemonkey]

@MP4    yup, showing side by side   not stacked.  

have u used a 3rd part app to do this or just the regular weebly elements?

did u switch themes tempoarily ? to see what gives?

on another note, best to enable SSL       which will make ur site https   and secure  

[PaulMathews]

@MP4 Looks like you're missing a media query on the "wsite-multicol-col" table class that switches columnar items from the their horizontal layout on desktop viewports to the vertically-stacked layout on mobile viewports. 

The media query that overrides the widths of items arranged in a columnar layout looks like this:

@media (max-width: 767px)
.wsite-multicol-col {
    max-width: 100% !important;
    display:block;
}

The default breakpoint for Weebly themes is usually 767px but could potentially be something other than that, however, your "wsite-multicol-col" class has no breakpoint width change at all in the css. Add this to your theme's css (in the Site Editor, click Theme then click the "Edit HTML/CSS" button at the bottom of the left-hand sidebar).

Out of curiosity, did you edit your site's css and inadvertently remove this or is your site hosted at a third-party host (not hosted on Weebly)?

[MP41]

Hi @PaulMatthews, thanks for your helpful response.

I had a go at adding the line of code to the CSS, but this creates an issue in how the menu is presented (screenshot here: https://drive.google.com/file/d/1yidLdF5Gu-PlDCgtQAQ1mCNENx7mbdMt/view?usp=sharing)

I've copied the original line of code for information which is under the MOBILE heading of the theme:

@Media (max-width: 767px; width: 100%) {

#content {
font-size: 14px;
line-height: 1.5;
}

#navigation-wrap {
background: #ffffff !important;
}

#navigation {
width: 100% !important;
background: #ffffff;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

.wsite-logo a #wsite-title, .wsite-logo a:hover #wsite-title{
font-size: 18px;
padding: 0.1em .25em .17em;
}

#main {
padding: 20px !important;
}

body.menu-open #wrapper #main {
left: 100%;
}

(This is where I tried adding the @Media line of code)

.wsite-multicol-col {
max-width: 100% !important;
display: block;
width: auto !important;
margin: 0 auto 2em !important;
}

In response to your question - this is how the theme was built - it was a Weebly theme (about 3 years old). Unusually, the columns used to stack, but although I haven't edited this section of the CSS before, at some point in the past months the stacking stopped working...