CSS help to reduce spacing on mobile between content block / Design -> Spacing CB moves on mobile

sdb

Hi!

I noticed a problem affecting several pages of my site on mobile. Maybe it can be solved with CSS.

This are the settings of my web pages. I add also some screenshots from this webpage https://www.sebastianph.com/It/Biografia

1) body fixed width 1300

2) to reduce the Text width of the content blocks, on the two sides of the Text content block I added two "Design -> Spacing" content blocks with container width 12% (left 12% space, center text 76%, right 12% space)

3) Using Screenfly I noticed this large space between the content blocks.

4) In customizing mode, by reducing the size of the desktop browser to simulate the mobile screen, I discovered that the two Spacing content blocks placed at the sides of the Text content block are moved, one above and one below the text. Why??? For this reason, space increases...too much.

5) I tried to change the webpage settings:
a) removed the Spacing content block on the sides of the Text content block (this block now again 100%),
b) reduced the Text body width 180 pixel on the left and right side to simulate the desired width (similar to the other with the Spacing block)
The result on mobile was as desired, without the space due to the moved Spacing content blocks, but with this setting a new problem appeared on tablets sizes: the text is excessively restricted by the 180+180 pixels.

Now I'm back to the initial setting with the Spacing content blocks on the two sides of the Text content block, waiting to find a solution...
I've read the threads of Scotthunter with similar problems, I tried also to edit a little bit Mike's CSS but without success (I'm not an expert!).

My idea is very simple...and simple ideas are often the right ones, hope so! That is, if I remove the Spacing content block only for mobile with CSS, I think I'd have solved it without having to put my hands on the whole site! Given that on desktop and tableb the use of Spacing content block is fine, do you think it would be enough? More suggestions?
I'd need the code for folders, pages and galleries.
Thank you!

Edit: analyzing the page, I discovered this string related to the Spacing content block: div class="sm-page-layout-column yui3-u" style="width: 12%;" data-layout-column="0"
I guess if I could get rid of it on mobile, I should solve...maybe!

Hikin' Mike

Add this to your Theme's Custom CSS:

/**
* Removes Spacers for Screens 765px and Smaller
************************************************/
@media screen and ( max-width: 765px ) {

    .sm-page-widget-21568057,
    .sm-page-widget-21568058,
    .sm-page-widget-21568059 {
        height: 0px;
        }

}

sdb

@Hikin' Mike , as always, I thank you for your reply.

I tried to enter the CSS code. First in the Theme's Custom CSS but it doesn't work, then I tried also on Entire Site and the result is the same.
(With Theme's Custom CSS you mean Active Theme -> Edit Theme -> Advanced -> Custom CSS, right?)

Let's say that it works in part, to reduce the spacing in the point that I took as sample in the screenshoots of my first message. If you want to take a look, now I've added the code to Theme's Custom CSS (on my site, the webpages with green menu).
Here a few screenshots to give an example.

1) https://www.sebastianph.com/It/Biografia here it works, as you can see, simulating a mobile. (on SmugMug it's a Page).

2) https://www.sebastianph.com/En/Biography English version of the same page as before with identical settings, it doesn't work.

3) I did several other tests, inserting the code in the other themes (I've six different) to see if it would work also for the Folder and Galleries, but on mobile the Spacing block don't leave on.
Eg. on this gallery https://goo.gl/Q9Lp1F in customization mode (like the 3rd of the first message) where you can see 3 Spacer content block

The only thing that comes to mind is that they are more .sm-page-widget-(.....class name)? Or the 3 listed should they be valid for every page/gallery/folder? Analysing other webpages, I found that the code of the related column/spacer widget .sm-page-widget-.... changes for every Spacer in the final part.
If there are no solutions, I can remove the Spacer content block on every webpage, reduce the Text content block container width to about 80% and find a solution to center it, since it moves to the left.

I probably said some nonsense, anyway I hope to have provided all the necessary information to solve.
Thank you.

Hikin' Mike

@sdb said:
The only thing that comes to mind is that they are more .sm-page-widget-(.....class name)?

Correct. The code I gave you is only for that page and with those three widget spacers. If you need you need to find all of the widget numbers using one of the webtools. Most browsers have some sort of webtools included.

sdb

Mike thanks a lot for confirm it.
Unfortunately a bad news for me, it would be a huge and unnerving job to search for all the class names on each page (between site and client area I've to create a few hundreds)...

One last question...I'm afraid of already knowing the answer. Do text content blocks also have each a class name?
Eg. if I remove the spacer content block and reduce the container width to 80% like in this screeenshot, is there a way to center the text content blocks of the whole site with a CSS?

Hikin' Mike

Content blocks (text block) has the same type of number. Because you have more than one page that has text at 80%, I would highly suggest using HTML/CSS block instead of a Text block. You have more control using a HTML/CSS block. That means you'll have to re-write those pages, BUT if you do it correctly, you only have to write a few lines of code. Using your page as an example:

In your Theme's Custom CSS, add this:

/**
 * Formatted Text Pages
************************************************/
.my-text {
    width: 80%;
    margin: 0 auto;
    text-align: justify;
    }

.my-text a { font-weight: bold; }

.my-text em { font-style: italic; } 

.my-text .underline{ text-decoration: underline; }  

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

    .my-text { width: 100%; }

}

Create a testing page and add a HTML block. Add this:

<div class="my-text">

    <p>Avete presente un bimbo che gira sempre con la macchina fotografica in mano, scattando foto a qualsiasi cosa gli capiti a tiro? Quello ero io!</p>

    <p>La prima fotografia che ho scattato, da bimbo, è stata ad una vanessa atalanta. Una farfalla. Nella foto che ne uscì, era un piccolo punto colorato in mezzo al verde dell'erba. Ogni tanto, quando ripasso da quel giardino, torna a salutarmi e facciamo due chiacchiere parlando del più e del meno come due vecchi amici al bar. E se me lo chiede, ci scattiamo una <a href="http://www.sebastianph.com/Immagini-bio/i-ZPCdmPd/0/L/seba-bio-web-4-L.jpg" target="_blank">foto</a> insieme :-)</p>

    <p>Ognuno sceglie un mezzo per capire, <span class="underline">inquadrare</span>, dare un significato a ciò che lo circonda, ed il mio è sempre stato il mirino della macchina fotografica. Perciò il medium visuale della fotografia mi ha sempre affascinato, fino a diventare concreto nei primi anni di questo secolo, quando conobbi un fotografo che mi ha introdotto in questo mondo dal punto di vista professionale. Ho studiato, e continuo a studiare, il mezzo fotografico integrando le mie conoscenze sotto la prospettiva tecnica/espressiva, senza tralasciare l’aspetto culturale, in particolar modo rivolto all’<a href="https://en.wikipedia.org/wiki/Visual_anthropology" target="_blank">antropologia visuale</a> conosciuta ai tempi dell’università. Non è solo un lavoro, è una passione e un mezzo di studio per interpretare ciò che vedo.</p>

    <p>Fotograficamente parlando sono nato con la pellicola, ed anche se ora regna il digitale continuo a fotografare come se lo stessi facendo a pellicola, disabilitando ogni automatismo escluso il cervello. L'impegno che mi riprometto ogni volta che prendo in mano una macchina fotografica è quello di premere il pulsante di scatto come se fosse la prima volta. Sentirsi arrivati, per me, è il primo sintomo di chi non ha più nulla da dire.</p>

    <p>Veniamo ora  alle info meno serie, quelle anagrafiche! Il nome lo sapete, sono nato a Firenze da un "meticciamento" italo-tedesco e vivo tra Montemurlo (Prato), Campagnano di Roma e Berlino. Cosa mi piace? Essere attivo col corpo e la mente, viaggiare, cucinare, ridere e ovviamente il <a href="http://it.wikipedia.org/wiki/Rugby_subacqueo" target="_blank">rugby subacqueo</a>. Come vivo? Tento di avere la mentalità aperta e sempre pronta a (re)imparare nuove nozioni. Con chi vado d’accordo? Con le persone che non hanno paura di mostrarsi e che non giudicano prima di conoscere. Chi non vado d’accordo? Con le persone false, che vivono a compartimenti stagni e che ti guardano dall’alto in basso.</p>

</div>

Save and publish. You should see your text 80% on desktop. When you switch to a mobile (736px or less) the text goes 100%.

WARNING: Do NOT add the CSS to the CSS section of your HTML/CSS block. It works, but you would have to put that on each page. Adding that one time to your Theme's Custom CSS is much easier (and the correct way) to edit in the future.

sdb

Thank you very much for clarification Mike!

I spent the morning doing some tests and it seems that everything works properly.

The only issue that I couldn't solve at this moment is the italic text: it work but is italic and bold together. For example "vanessa atalanta" between "em /em" in HTML on the mentioned page have this result.

You finally convinced me, as you already told me in another thread, to use HTML. I'll have to convert most of the site's texts, while for some I'll keep using text content blocks.

I added only the font size and the link color to the code:
.my-text {
width: 80%;
margin: 0 auto;
text-align: justify;
font-size: 16pt;
}

and

.my-text a {
color: #398d19!important;
}

While on entire site I keep using this CCS code you helped me find out for the text, which works for both the text contet block and the HTML.
p {
font-family: Raleway;
font-style: normal;
font-variant: normal;
font-weight: 100;
line-height: 32px;
}

If something is not right, let me know, thank you!

Hikin' Mike

Just add the font-weight to your italic code like this:

.my-text em { 
    font-style: italic; 
    font-weight: 100;
    } 

I noticed you are using two <br> on your last two paragraphs. I wouldn't use a <br>. I would just add margin-top: 20px on your <p> tag instead:

p {
    font-family: Raleway;
    font-style: normal;
    font-variant: normal;
    font-weight: 100;
    line-height: 32px;
    margin-top: 20px;
    }

sdb

Thank you Mike for having refined the codes. I started changing the pages.

Luckily I also found that by changing the height of the Spacer to 1px, I can limit the effect of the mobile. So, for a series of pages where I've only a few Spacers, I can in the meantime limit myself to this operation. However, the future will have to be HTML as it offers much more possibilities...!