[Resolved] Set cells to full width in Layouts for mobiles

[Author]

Posts

[timB]

I have a series of rows making up a grid layout on desktops. However, I need each cell to fill an entire row when viewed on mobiles. I thought I had fixed it, but it turns out that the solution I found simply made each cell full-width on desktops too.

I looked at this:
https://toolset.com/forums/topic/setting-multiple-bootstrap-column-classes/
And this
https://toolset.com/documentation/user-guides/using-custom-rows-add-custom-theme-functionality/
And this
https://toolset.com/documentation/user-guides/adding-custom-styling-to-a-layout/#setting-cells-and-rows-attributes

...And I tried adding the col-xs-12 class to individual cells, and also col-sm-12 as an experiment but it made no difference. (Perhaps I'm wrong to expect it should).

If you have a look at hidden link (pw toby) you will see what I'm trying to achieve. The cells should appear alongside each other in a row on a desktop, but fill the entire row on mobile screens.

Any help will be much appreciated.
Thank you

[Noman]

Hi Dave,

Thank you for contacting Toolset support. Looks like your theme is using older Bootstrap classes (span5, span7 etc) in html so that col-xs-12 not be applied. First we need to use latest bootstrap classes in html.

1. Can you please make sure all Toolset plugins are updated to latest versions as a primary check:
https://toolset.com/account/downloads/

2. Also can you please share your Debug Information with us so we can see it? I have enabled debug info box for your next reply:
https://toolset.com/faq/provide-debug-information-faster-support/

3. Please provide back-end screenshot:
- Layout
- Toolset >> Settings >> General >> Bootstrap loading

Thank you

[timB]

Hi Norman

Many thanks for your quick response.

I can confirm that we're running the latest versions of toolset.
We also have the Twitter Bootstrap Toolkit plugin installed. When we disable it, the cells extend full-width for all cells on desktop as well as mobile. We only want them extending full-width for mobiles.

Following is my debug info - I couldn't see a debug info box.
I am also attaching the screenshots you asked for.

Thanks again for your help. I'll be very grateful to get this working how we need it.

Best wishes
Tim

{"core":{"Wordpress":{"Multisite":"No","SiteURL":"http:\/\/dev.thegriffininn.co.uk","HomeURL":"http:\/\/dev.thegriffininn.co.uk","Version":"4.8.1","PermalinkStructure":"\/%category%\/%postname%\/","PostTypes":"post, page, attachment, revision, nav_menu_item, custom_css, customize_changeset, wp-types-group, wp-types-user-group, wp-types-term-group, frm_styles, frm_display, frm_form_actions, dd_layouts, view, view-template, bedroom, bedroom-image, home-feature-images, homesection, homebox, social-group, social-icon, menu-page, event, awards, home-slider, widget-area","PostSatus":"publish, future, draft, pending, private, trash, auto-draft, inherit"},"Server":{"jQueryVersion":"1.12.4","PHPVersion":"5.4.43","MySQLVersion":"5.6.35","ServerSoftware":"Apache\/2.2.31 (Unix) mod_ssl\/2.2.31 OpenSSL\/1.0.1e-fips mod_bwlimited\/1.4"},"PHP":{"MemoryLimit":"99999999912M","UploadMax":"240M","PostMax":"50M","TimeLimit":"700","MaxInputVars":"1000"}},"plugins":{"active_plugins":{"admin-bar-button\/admin-bar-button.php":{"Name":"Admin Bar Button","PluginURI":"","Version":"4.1","Author":"David Gard","AuthorURI":"","TextDomain":"djg-admin-bar-button","DomainPath":"","Network":false,"Title":"Admin Bar Button","AuthorName":"David Gard"},"advanced-iframe\/advanced-iframe.php":{"Name":"Advanced iFrame","PluginURI":"http:\/\/www.tinywebgallery.com\/blog\/advanced-iframe","Version":"7.5","Author":"Michael Dempfle","AuthorURI":"http:\/\/www.tinywebgallery.com","TextDomain":"advanced-iframe","DomainPath":"\/languages","Network":false,"Title":"Advanced iFrame","AuthorName":"Michael Dempfle"},"bootstrap\/bootstrap.php":{"Name":"Twitter Bootstrap Toolkit","PluginURI":"","Version":"0.3.1","Author":"Hassan Derakhshandeh","AuthorURI":"","TextDomain":"bootstrap","DomainPath":"","Network":false,"Title":"Twitter Bootstrap Toolkit","AuthorName":"Hassan Derakhshandeh"},"chimpexpress\/chimpexpress.php":{"Name":"ChimpExpress","PluginURI":"http:\/\/www.chimpexpress.com","Version":"1.6.3","Author":"freakedout","AuthorURI":"http:\/\/www.freakedout.de","TextDomain":"chimpexpress","DomainPath":"","Network":false,"Title":"ChimpExpress","AuthorName":"freakedout"},"codepress-admin-columns\/codepress-admin-columns.php":{"Name":"Admin Columns","PluginURI":"https:\/\/www.admincolumns.com","Version":"3.0.3","Author":"AdminColumns.com","AuthorURI":"https:\/\/www.admincolumns.com","TextDomain":"codepress-admin-columns","DomainPath":"\/languages","Network":false,"Title":"Admin Columns","AuthorName":"AdminColumns.com"},"font-awesome\/plugin.php":{"Name":"Font Awesome Icons","PluginURI":"http:\/\/www.rachelbaker.me","Version":"3.2.1","Author":"Rachel Baker","AuthorURI":"http:\/\/rachelbaker.me\/font-awesome-icons-wordpress-plugins\/","TextDomain":"font-awesome","DomainPath":"","Network":false,"Title":"Font Awesome Icons","AuthorName":"Rachel Baker"},"formidable-mailchimp\/formidable-mailchimp.php":{"Name":"Formidable MailChimp","PluginURI":"http:\/\/formidablepro.com\/","Version":"1.04.02","Author":"Strategy11","AuthorURI":"http:\/\/strategy11.com","TextDomain":"frmmlcmp","DomainPath":"","Network":false,"Title":"Formidable MailChimp","AuthorName":"Strategy11"},"formidable\/formidable.php":{"Name":"Formidable Forms","PluginURI":"https:\/\/formidableforms.com\/","Version":"2.04.01","Author":"Strategy11","AuthorURI":"https:\/\/formidableforms.com\/","TextDomain":"formidable","DomainPath":"","Network":false,"Title":"Formidable Forms","AuthorName":"Strategy11"},"genesis-responsive-slider\/genesis-responsive-slider.php":{"Name":"Genesis Responsive Slider","PluginURI":"http:\/\/www.studiopress.com","Version":"0.9.5","Author":"StudioPress","AuthorURI":"http:\/\/www.studiopress.com","TextDomain":"genesis-responsive-slider","DomainPath":"\/languages","Network":false,"Title":"Genesis Responsive Slider","AuthorName":"StudioPress"},"genesis-simple-edits\/plugin.php":{"Name":"Genesis Simple Edits","PluginURI":"http:\/\/www.studiopress.com\/plugins\/genesis-simple-edits","Version":"2.2.0","Author":"StudioPress","AuthorURI":"http:\/\/www.studiopress.com\/","TextDomain":"genesis-simple-edits","DomainPath":"\/languages","Network":false,"Title":"Genesis Simple Edits","AuthorName":"StudioPress"},"genesis-title-toggle\/genesis-title-toggle.php":{"Name":"Genesis Title Toggle","PluginURI":"http:\/\/www.billerickson.net\/","Version":"1.7.1","Author":"Bill Erickson","AuthorURI":"http:\/\/www.billerickson.net","TextDomain":"genesis-title-toggle","DomainPath":"languages","Network":false,"Title":"Genesis Title Toggle","AuthorName":"Bill Erickson"},"hide-my-site\/index.php":{"Name":"Hide My Site","PluginURI":"","Version":"2.0.5","Author":"Justin Saad","AuthorURI":"http:\/\/www.clevelandwebdeveloper.com","TextDomain":"hide-my-site","DomainPath":"","Network":false,"Title":"Hide My Site","AuthorName":"Justin Saad"},"jonradio-current-year-and-copyright-shortcodes\/jonradio-current-year-and-copyright-shortcodes.php":{"Name":"Current Year and Copyright Shortcodes","PluginURI":"http:\/\/zatzlabs.com\/plugins\/","Version":"1.0.1","Author":"David Gewirtz","AuthorURI":"http:\/\/zatzlabs.com\/plugins\/","TextDomain":"jonradio-current-year-and-copyright-shortcodes","DomainPath":"","Network":false,"Title":"Current Year and Copyright Shortcodes","AuthorName":"David Gewirtz"},"layouts-genesis\/layouts-genesis.php":{"Name":"Toolset Genesis Integration","PluginURI":"https:\/\/toolset.com\/","Version":"1.9.2","Author":"OnTheGoSystems","AuthorURI":"http:\/\/www.onthegosystems.com","TextDomain":"layouts-genesis","DomainPath":"","Network":false,"Title":"Toolset Genesis Integration","AuthorName":"OnTheGoSystems"},"layouts\/dd-layouts.php":{"Name":"Toolset Layouts","PluginURI":"https:\/\/toolset.com\/","Version":"2.0.2","Author":"OnTheGoSystems","AuthorURI":"http:\/\/www.onthegosystems.com","TextDomain":"layouts","DomainPath":"","Network":false,"Title":"Toolset Layouts","AuthorName":"OnTheGoSystems"},"mailchimp\/mailchimp.php":{"Name":"MailChimp","PluginURI":"http:\/\/www.mailchimp.com\/plugins\/mailchimp-wordpress-plugin\/","Version":"1.5.7","Author":"MailChimp","AuthorURI":"https:\/\/mailchimp.com\/","TextDomain":"mailchimp","DomainPath":"","Network":false,"Title":"MailChimp","AuthorName":"MailChimp"},"page-scroll-to-id\/malihu-pagescroll2id.php":{"Name":"Page scroll to id","PluginURI":"http:\/\/manos.malihu.gr\/page-scroll-to-id","Version":"1.6.2","Author":"malihu","AuthorURI":"http:\/\/manos.malihu.gr","TextDomain":"page-scroll-to-id","DomainPath":"\/languages","Network":false,"Title":"Page scroll to id","AuthorName":"malihu"},"toolset-module-manager\/plugin.php":{"Name":"Toolset Module Manager","PluginURI":"https:\/\/toolset.com\/home\/toolset-components\/","Version":"1.6.8","Author":"OnTheGoSystems","AuthorURI":"http:\/\/www.onthegosystems.com\/","TextDomain":"toolset-module-manager","DomainPath":"","Network":false,"Title":"Toolset Module Manager","AuthorName":"OnTheGoSystems"},"types\/wpcf.php":{"Name":"Toolset Types","PluginURI":"http:\/\/wordpress.org\/extend\/plugins\/types\/","Version":"2.2.16","Author":"OnTheGoSystems","AuthorURI":"http:\/\/www.onthegosystems.com","TextDomain":"types","DomainPath":"","Network":false,"Title":"Toolset Types","AuthorName":"OnTheGoSystems"},"wp-clips\/wp-clips.php":{"Name":"WP Clips","PluginURI":"http:\/\/wpclips.net","Version":"2.0.2","Author":"Krolyn Studios","AuthorURI":"http:\/\/krolyn.com","TextDomain":"wp-clips","DomainPath":"\/languages\/","Network":false,"Title":"WP Clips","AuthorName":"Krolyn Studios"},"wp-views\/wp-views.php":{"Name":"Toolset Views","PluginURI":"https:\/\/toolset.com\/?utm_source=viewsplugin\u0026utm_campaign=views\u0026utm_medium=plugins-list-full-version\u0026utm_term=Visit plugin site","Version":"2.4.1","Author":"OnTheGoSystems","AuthorURI":"http:\/\/www.onthegosystems.com","TextDomain":"wp-views","DomainPath":"","Network":false,"Title":"Toolset Views","AuthorName":"OnTheGoSystems"}},"mu_plugins":[],"dropins":[]},"theme":{"Name":"BG Mobile First","ThemeURI":null,"Author":"\u003Ca href=\u0022http:\/\/briangardner.com\/\u0022\u003EStudioPress\u003C\/a\u003E","AuthorURI":null,"Template":"genesis","Version":"2.0","TextDomain":null,"DomainPath":null},"extra-debug":{"types":{"add_resized_images_to_library":0,"register_translations_on_import":1,"images_remote":0,"images_remote_cache_time":"36","help_box":"by_types","hide_standard_custom_fields_metabox":"show","postmeta_unfiltered_html":"on","usermeta_unfiltered_html":"on"},"layouts":{"ddl_layouts_css_framework_options":"bootstrap-2","framework_setup":true},"views":{"views_template_loop_blog":"0","wpv_bootstrap_version":1,"wpv_custom_conditional_functions":[],"wpv_custom_inner_shortcodes":["add-to-total","show-total","su-spacer","print-button","easy-notify","render-my-field"],"wpv_debug_mode":"","wpv_debug_mode_type":"compact","wpv_map_plugin":"","wpv_show_edit_view_link":"0","wpv_show_hidden_fields":"","wpv_saved_auto_detected_framework":"","wpv_codemirror_autoresize":"","wpv_enable_pagination_manage_history":true,"wpv_enable_parametric_search_manage_history":true,"views_template_for_homebox":106,"wpv-debug-mode-type":"compact","views_template_for_bedroom":293,"views_template_for_menu":386,"views_template_for_menu-page":723,"wpv-theme-function":"render_view_template"}}}

[Noman]

Thanks for screenshots and details. I have again enabled debug info box, it would be great if you can paste the debug log in that box so its easier to read.

[timB]

Thanks for that..

I have pasted the debug information here.
Many thanks

Tim

[Noman]

Hello Dave,

Looks like someone added html or css classes manually inside Visual editor cells OR there is some plugin conflicting. Because standard Layouts page & rows are contained within class="ddl-full-width-row row" -- see attached screenshot, this is what HTML markup of Layout looks like, which is not the same in your site page.

And this Twitter Bootstrap Toolkit plugin is 4 years old.

1. Please try to check it by deactivating all third-party plugins and switching back to the Default Theme (e.g. Twenty Seventeen theme) to see for any possible conflicts with any of the plugins or themes?

2. I have checked the site, there are JS errors in the browser console, please check or fix this issue - see attached screenshot, this could be coming from some plugin or theme.

3. After disabling all plugins and themes, you can also create a new test Layout template to see how the html markup looks without interference of other plugins and theme.

4. After trying above steps, if the issue still exists, we need to take a look at your setup and to request temporary website WP-admin and FTP info for your site to debug further and to help in resolving this. Your next answer will be private which means only you and I have access to it.

=== Please backup your database and website ===

✙ I would additionally need your permission to de-activate and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important.

✙ Please add the Link to the [Layout] backend Edit Screen.

Thank you

[Noman]

That's quite strange, does the WP admin becomes not reachable as soon as you disabled plugins?

Typically when we disable plugins or change theme WP admin of the site should not break and does not become unable to access. Frontend design change is fine and logical while changing theme or plugins.

If backend shows issues, then this indicates some php or code error which can be seen by enabling WP Debug mode.

And yes, please restore the working backup and provide us with WP & FTP login info, private box enabled.

Thank you

[Luo Yang]

Dear Tim,

Noman isn't available currently.

I checked your website:
hidden link

I searched the keyword "col-xs-12" in the source HTML codes, find only one result, it is in the element: "ASK NOT WHAT YOU CAN DO FOR"

You are using below CSS codes to setup it as 100% width:

.barmat{
  width:100%;
  display:block;
  overflow:hidden;
  height:400px;
  padding:20px 10px 5px 10px;
}

I suggest you replace it as below CSS codes:

.barmat{
  display:block;
  overflow:hidden;
  height:400px;
  padding:20px 10px 5px 10px;
}
@media screen and (max-width: 500px) {
	.barmat{
  		width:100% !important; 
    }
}

More help:
hidden link

[timB]

Ah Luo - that's excellent! Thank you.

I did as you suggested and it worked in making all barmats 100% on mobiles. However the images inbetween were still restricted by their span.

So my final changes in the mobile section of the CSS were this (to get all images 100% width aswell):

@media only screen and (max-width: 500px) {

.barmat{width:100%!important;}
  .row-fluid .span6, .row-fluid .span2, .row-fluid .span3, .row-fluid .span4, .row-fluid .span5, .row-fluid .span7, .row-fluid .span8, .row-fluid .span9, .row-fluid .span10{
    width:100%!important; 
    margin-left:0!important;
  }

.... or is there a more efficient way of doing it?