Hi,
Pretty much all my site looks much better on mobile if it is in desktop view.
I looked up how to change it and found various suggestions to remove a line from the header but I can’t see how to do it in X much less X-child. I guess this is because of how Integrity templates are made. How do I do it, either by finding the line of code () or the equivalent or by global css.
Please see this page for what I mean:
Hey There,
Thanks for writing in! Do you want to display your products in 4 columns even in smaller devices? If that is the case, please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS
@media(max-width: 979px){
.x-raw-content .woocommerce .cols-4 li.product,
.x-raw-content .woocommerce.columns-4 li.product {
width: 22%;
margin-right: 4%;
}
.x-raw-content .woocommerce .cols-3 li.product:nth-child(2n+3),
.x-raw-content .woocommerce .cols-4 li.product:nth-child(2n+3),
.x-raw-content .woocommerce.columns-3 li.product:nth-child(2n+3),
.x-raw-content .woocommerce.columns-4 li.product:nth-child(2n+3) {
clear: none;
}
.x-raw-content .woocommerce li.product.last {
margin-right: 0;
}
}
We would loved to know if this has work for you. Thank you.
Hi, thank you - is this to go in individual pages or global CSS?
Hey There,
If you want to make the change in one specific page, you can add the code in Cornerstone’s custom css. If you have several pages that you would like to change, then you can add the code in the Global CSS instead.
Hope this helps.
Basically I wan t the whole site, including header and footers to be desktop view on mobile. not just woocommerce products.
Hi There,
Regretfully, there is no easy way to disable the responsive view as this is against the nature of the theme. X and its layouts were designed to be responsive. Disabling these styling would mean editing a bunch if not all of CSS styles which we do not recommend.
Thank you for understanding.
Ugh. That’s unlucky. Nearly everything looks and works better on the desktop view on mobile than it does in the responsive version, product images and rows, things like related products. They are all appearing far too large and the stacking is a pain. I’m finding it very hard to find ways to control loads of things, suspect far more editing than if I could just offer a view that fits the viewport and edit a few bits that don’t work.
Looks like the solution suggested by Rad in this thread https://theme.co/apex/forums/topic/how-to-disable-responsive-features/ no longer exists.
Hey There,
The _header.php file is now located in \wp-content\themes\x\framework\legacy\cranium\headers\views\global\. You must copy this file and place it in the same folder path right in your child theme like this: \wp-content\themes\x-child\framework\legacy\cranium\headers\views\global\
Hope this helps.
Thanks Rue, I’ve backed up and will try this in the morning - I’m definitely willing to have a go, it would solve a mass of problems. I’ll report back if I can make it work without causing chaos.
Hang on, before I let you go - am I right that I copy that file into the child theme and make the change that Rad suggested in the old thread?
Hey There,
Hang on, before I let you go - am I right that I copy that file into the child theme and make the change that Rad suggested in the old thread?
Best Regards.
Ta Rue. Fingers crossed.
The line doesn’t exist there unfortunately. Looks like it doesn’t exist.
Hey There,
Sorry for the confusion. The line does not exist anymore. The original contents of _header.php file is now:
<?php
// =============================================================================
// VIEWS/GLOBAL/_HEADER.PHP
// -----------------------------------------------------------------------------
// Declares the DOCTYPE for the site and includes the <head>.
// =============================================================================
?>
<!DOCTYPE html>
<html class="no-js" <?php language_attributes(); ?>>
<head>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="x-root" class="x-root">
<?php do_action( 'x_before_site_begin' ); ?>
<div id="top" class="site">
<?php do_action( 'x_after_site_begin' ); ?>
And using Rad’s reply from the old thread, the line of code can now be found in _meta.php.
<?php
// =============================================================================
// VIEWS/GLOBAL/_META.PHP
// -----------------------------------------------------------------------------
// Outputs meta data into the <head> of the site.
// =============================================================================
?>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php wp_title( '' ); ?></title>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
So instead of the header file, please duplicate the _meta.php file instead.
Done, thank you. It’s worked a treat 
Glad it’s working and you’re most welcome!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.