Moble phone views

[alaneku]

Hi
Can somebody point me in the right direction ?

In the page templates - add page template tab under themes and pages section, there is shown an option for a 3 column page template, but this does not work because there is no php file in the atomik directory. In the atomik directory there is a left_sidebar.php, a right_sidebar.php, a full.php etc but no 3_column.php.

So I modified the Left/right side bar files to create a 3 column.php page template file. This works fine on my computer screen and gives me the type layout I like. However when I go the mobile phone pre-view the content is not split properly there is over lapping of the information in the 3 columns.

What else do I have to do or what files do I have to modify/create so that the 3 column page template renders properly in the mobile pre-view ?

Another question I have which is some way related, is why, in the 2 column containers, is the padding so big on each side of the column (56 px each side if I remember well) ? For me this a real waste of screen real estate. Can this be modified in the custom css section of the custom skin tab ?

Any indication what can be done in both cases would be appreciated

[mnakalay]

Hello,
First question: if your 3 columns overlap, it’s most likely because you’re not using the correct Bootstrap 5 grid class names. Could you share your template code here, so we can check?

As for the 2 column container, there are actually 2 of them. One is called “condensed” and the other one “light”.
The condensed one has a DIV around each area using class names pe-md-5 ps-md-5
Ps and pe mean “padding start” and “padding end”. This means that, starting from break-point md (medium) and above, the wrapping DIVs will get some left and right padding (size 5 or in your case 65px)
The light container doesn’t have that extra padding.

I hope this helps.

[alaneku]

I am sure you are correct Bootstrap 5 grid class names here is what I have

<?php defined('C5_EXECUTE') or die("Access Denied."); use Concrete\Core\Area\Area; $view->inc('elements/header.php'); ?> <?php $a = new Area('Page Header'); $a->enableGridContainer(); $a->display($c); ?>

<?php $a = new Area('col-1'); $a->display($c); ?>

<?php $a = new Area('col-2'); $a->display($c); ?>

<?php $a = new Area('col-3'); $a->display($c); ?>

<?php $a = new Area('Page Footer'); $a->enableGridContainer(); $a->display($c); ?> <?php $view->inc('elements/footer.php');

[alaneku]

Sorry I did not paste the code correctly

<?php
defined('C5_EXECUTE') or die("Access Denied.");
use Concrete\Core\Area\Area;
$view->inc('elements/header.php');
?>

<?php
$a = new Area('Page Header');
$a->enableGridContainer();
$a->display($c);
?>

<div class="container">
    <div class="row">
        <div class="col-md-4 col-1">
            <?php
            $a = new Area('col-1');
            $a->display($c);
            ?>
        </div>
        <div class="col-md-4 col-2">
        <?php
            $a = new Area('col-2');
            $a->display($c);
        ?>
        </div>
        <div class="col-md-4 col-3">
        <?php
            $a = new Area('col-3');
            $a->display($c);
        ?>
        </div>
    </div>
</div>

<?php
$a = new Area('Page Footer');
$a->enableGridContainer();
$a->display($c);
?>

<?php
$view->inc('elements/footer.php');

[alaneku]

hi

Can anyone help concerning the 3 column page template ? I have modified the code above, now the the three column Layout work on my computer screen and also works in the mobile view. However when I publish the page there is an error message flash up on the screen - the error message disappears immediately so fast I cannot read it.

Here is my modified code

<?php
defined('C5_EXECUTE') or die("Access Denied.");
use Concrete\Core\Area\Area;
$view->inc('elements/header.php');
?>

<?php
$a = new Area('Page Header');
$a->enableGridContainer();
$a->display($c);
?>

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <?php
            $a = new Area('column-1');
            $a->display($c);
            ?>
        </div>
        <div class="col-md-4">
        <?php
            $a = new Area('column-2');
            $a->display($c);
        ?>
        </div>
        <div class="col-md-4">
        <?php
            $a = new Area('column-3');
            $a->display($c);
        ?>
        </div>
    </div>
</div>

<?php
$a = new Area('Page Footer');
$a->enableGridContainer();
$a->display($c);
?>

<?php
$view->inc('elements/footer.php');

[EvanCooper]

Hi @alaneku - I’m not getting an error when publishing using the template code you provided there. You might have another problem elsewhere. You might check the Concrete logs to see if any errors are showing up there as it won’t be possible to diagnose without knowing what that error is:
/index.php/dashboard/reports/logs

[alaneku]

Hi

Thanks for looking at the code, yes it does work both on a full size screen and in the mobile preview. I did as mnakalay suggested, but I am not a programmer and I must admit that a got a little confused trying to understand the Bootstrap 5 documentation.

The error message that disappeared very quickly, seems to have been a one off, I do not get any error messages now. However, as I said I am not a “pro” - the last time I did a website was in 2013, to say that things have moved on since then, is a bit of an understatement !

After a couple of months of “playing about” on my local computer I am just becoming to understand how complex the system is. I am worried that, because I don’t understand the big picture, I might do something that might appear to work in isolation, but does something else somewhere in the system which might cause problems.

I have now set up Concrete cms on our web hosing company and I am starting to populate the site. We have 2 languages with about 350 pages per language, so it is lot of work just to populate (and translate) so I would hate to compromise all that work by doing something stupid on the programming side that I don’t fully understand.

I will keeping playing with my test set up I have locally on my computer, and I may use this 3 column code later on our production site - if I feel confident enough.

It would be nice if there was a section in the documentation that goes into greater depth on creating these page template files. In the backend there a number page templates that are shown in image form but there is no associated file.

Again thanks to both of you for help.

[alaneku]

Hi EvanCooper
Sorry I did not read all of your post correctly, the only references I can find in my logs are as follows:

But I am not sure if these errors refer to my earlier efforts in modifying the .php file ? they probably are because they are dated 18/01/2023.

So maybe what I saw with the later version is not recorded in the logs

[EvanCooper]

So when you refer to the page templates shown on the backend in image form, do you mean these:

Or the icon list here available when you create a new page template:

I just want to make sure I’m understanding so I can spruce up the documentation if need be. Thanks!

[alaneku]

Hi
I mean the lower screenshot shown above “add page template”. I was looking at this documentation:
Add Page Template

I clicked on the 3 column icon in the “add page template” tab and the 3 column image then appeared in your first screenshot above “page templates” tab.

There are 13 images in “add page template” and 9 in the standard “page templates” and only 9 corresponding .php files.

The documentation suggests using the other .php files as as guide to make your own .php file. This is what I tried to do, but being an amateur I made some mistakes.

Perhaps the above referenced documentation could be expanded a little, because as per as mnakalay suggestion above, I did not know you had to refer to the Bootstrap 5 documentation to make sure that the .php file I created correctly inherited the Bootstrap information.

Thanks again for your help.