Column Breakpoint Issues

Support
#1

I am working on a page that has 4 sections that are made up of rows divided into 1/3 + 2/3. I am having two problems with this page: http://leadershipforchange.longandshortcreative.com/training/

  1. The image is responsive as the page width shrinks, but when the columns stack, the image stays tiny, rather than sizing back up.

  2. I want to change the breakpoint to 1000px. I have tried adding this code to the page’s CSS, but it is having no effect:
    @media (max-width: 768px){
    .x-column.x-sm.x-1-3 {
    width: 100%;
    }
    }

What can I do to fix this?

#2

Hi There,

Thank you for writing in, to resolve the image issue on mobile view, please remove this from your page CSS.

.x-column.x-sm.x-1-3 {
    width: 33.333%;
    margin: 0;
}

Then set your image width to 100%


For your second issue, please add this to your page CSS.

@media (max-width: 1000px) {
	.x-column.x-sm {
	    float: none;
	    width: 100%;
	    margin-right: 0;
	}
}

Hope it helps,
Cheers!

#3

Thank you so much for responding! I made all three changes, and both problems still exist. Any other ideas?

#4

Hi There,

I am still seeing this on your page CSS.

.x-column.x-sm.x-1-3 {
    width: 33.333%;
    margin: 0;
}

But not the CSS I provided above. Please remove that and add mine.

If the issue persists, please provide us login credentials in a secure note so we can take a closer look.

Cheers!

#5

OK–for whatever reason, it wasn’t saving even though the congratulatory pop up was appearing. So I restarted the browser and redid the changes you suggested, and the problems are still happening.

#6

Hi There,

Sorry that you’re having that issue, lets try increasing your site’s allocated PHP memory limit. To do this, please access your wp-config.php via FTP it can be found on the root directory of your WP installation, and add this:

define( 'WP_MEMORY_LIMIT', '512M' );
define( 'WP_MAX_MEMORY_LIMIT', '512M' );

before the line:

/* That’s all, stop editing! Happy blogging. */

You can also free up some of your resources by deactivating some of the plugins that you’re not using.

Also, please do a plugin test between Essential Grid and Modern Event Calendar, try deactivating either one them and see if that resolves the saving issue.

If nothing works, please provide us login credentials (wp-admin and FTP) in a secure note (the key-icon button on the lower-right of your replies) so we can take a closer look.

screenshot


Cheers!

#7

I will happily give this a try, but I just wanted to let you know that I tried this code:

@media (max-width: 1000px) {
.x-column.x-sm {
float: none;
width: 100%;
margin-right: 0;
}
}

On another page and it worked great. There’s seriously just something wrong with this page.

#8

Adding those lines to wp-config.php doesn’t seem to have made a difference. :disappointed:

#9

Hi There,

Did you test deactivating either or both of this plugin Essential Grid and Modern Event Calendar?

Please provide us login credentials in a secure note so we can take a closer look.

Thanks,

#10

I did add those in an earlier reply. I have not tried deactivating, but it seems weird that a conflict would only impact one page.

#11

If I deactivate those plugins will I lose the grids and calendars that I have created so far?

#12

I was able to rebuild this page from scratch here: http://leadershipforchange.longandshortcreative.com/test-page/ ‎
And it all works fine. Any ideas on what is different?

#13

Hi There,

I did check the original “training” page and saw a couple instances of syntax error that could be the cause of the page not saving.

For example this one here (https://prnt.sc/jf1vwe), you miss a closing bracket (>) in there.
Another one here (https://prnt.sc/jf1w7b), you don’t need to wrap your text in <h3> tag, because you already have set that to be h3 in the tag options.

Please review your training page content and make sure all tags are closed.

Thanks,

#14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.