make wp gallery 3 items go to 1 item on mobile view

@nicallen

try this in you custom css area / child theme

@media screen and (max-width: 30em) {
.gallery-columns-3 .gallery-item {
    min-width: 100%;
}
}

I tried it but no effect. Still only closes too 2 columns. Thanks though.

I have looked at your child theme style.css and I can’t see the code on there… Where did you add it as I can’t see it in the header styles either?

Hi. I had removed it, but as it has no effect, i can see, I have put it back in the child css with appearance editor as before. If you would be kind enough to look again that would be great. Thanks.

can you add the second closing bracket please… so it is like this

}
}

Hi. I had added the second closing bracket still no change. https://www.tinkerspark.com/wp/flying-scotsman-flying-south/

Please also do the same to the other code before it so

}
@media screen and (max-width: 30em) {

becomes

}
}
@media screen and (max-width: 30em) {

Hi. No change. Here is the complete child css. any clues? Thanks.

 /*
 Theme Name: Twenty Seventeen Child Theme
 Theme URI: https://yourwebsite.com
 Author: Your Name
 Author URI: https://yourwebsite.com
 Template: twentyseventeen
 Description: Child theme for Twenty Seventeen.
 Version: 0.1
 License: GNU General Public License v2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 Tags:
 Text Domain: twentyseventeen-child
 */ 

.single-post:not(.has-sidebar) #primary, .page.page-one-column:not(.twentyseventeen-front-page) #primary, .archive.page-one-column:not(.has-sidebar) .page-header, .archive.page-one-column:not(.has-sidebar) #primary {
   max-width: 1000px;
}
.page-one-column .panel-content .wrap {
   max-width: 1000px;
}
@media screen and (min-width: 48em) {
    .blog:not(.has-sidebar) #primary article,
    .archive:not(.page-one-column):not(.has-sidebar) #primary article,
    .search:not(.has-sidebar) #primary article,
    .navigation.pagination,
    body.blog .site-content .page-header,
    body.archive .site-content .page-header,
    body.search .site-content .page-header {
        float: none;
        margin-left: auto;
        margin-right: auto;
        max-width: 1000px;
        width: auto;
}
.gallery-item {
	margin: 0em 0em 0em 0em;
	padding: .4em .4em .4em .4em;
}
}
@media screen and (max-width: 30em) {

.gallery-columns-3 .gallery-item {
    min-width: 100%;
}
}

[Moderator note: code fixed. Please wrap code in the backtick character or use the code button.]

• This reply was modified 7 years, 7 months ago by bdbrown.

Hi. I just checked the site on an actual mobile phone, andriod. It works fine. Sorry. I was closing the browser width to see see the result. Obviously a mistake on my part. I removed the css to see if it changed and it did. Thank you. Just want to remove the space taken by the right margin in the gallery now. But I have made a fresh thread for this. Once again Thank you.