Home Forums Designer Blocks for Gutenberg Designer Blocks for Gutenberg – styling questions

This topic contains 14 replies, has 3 voices, and was last updated by  Nele 3 months, 1 week ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #56256

    Nele
    Participant

    Thank you @weaver for the great Designer Block Plugins for Gutenberg.
    I have tried to work with them and there are really lovely details in it, which are easy to handle with.

    This are my issues and questions in connection with the plugins:

    Homepage: https://wycliff.de/relaunch2018/dna/
    Admin: kr45mn
    Password: 67jh#t78(u)

    A. All-in-One Image/Text

    1. In the first block (which I gave the class „myclass-1“) I wanted to have the top description with a margin-top for mobile. Therefore I put into the Global CSS:

    @media all and (max-width:670px) {
    .page-id-14 .myclass-1 .wvrblocks-imgtext__descTop {margin-top: 4em !important;}
    }

    This works fine. But now I want to have the Switch Point for the responsive Layout (both columns with a width of 100%) much earlier. In the Weaver X-Plus Flex Columns I can put in the Layout Trigger Width – is there an opportunity to do this in this block similar way? Or how can I come to the result of an earlier Switch Point?

    2. How can I get more space on the right side of the description area on mobile? Now it is too near to the edge.

    3. If I want more space between the picture and the text – this works very easy. But then on mobile there is too much space on the left of the text. How can I fix this?

    4. For the top description the opportunity to choose it as a heading (defined by the theme css) would be great.

    5. Parallax Block: How can I reduce the space above the top description on mobile or how can I reduce the height for mobile?

    B. Image Columns

    1. I chose for the first block (with the numbers and circles) a width of 70%, but this isn’t responsive.
    How can I change this? For a smaller device it would be great to have it responsive and a width of 100%.

    2. Is it possible to change the text-alignment to left? How can I do this?

    I know, all of this I can do with the Weaver Flex Columns. But it would be great to have this more flexibility within the two plugins as well. Maybe it is possible…
    Or maybe I misunderstand this plugins and I shouldn’t use it the way I have tried?

    I appreciate any help for my questions!

    #56258

    scrambler
    Moderator

    A-

    1- I will let @weaver answer

    2- are you saying you want the description area less wide?
    because you can simply reduce the overall width percentage of the whole block to do that.

    3- the left margin of the description blocks is in % so they should remain proportional on mobile.

    but if you wan to change value on mobile, you could use a CSS rule like below (placed in the theme global custom CSS rule box)

    .is-mobile [class*=wvrblocks-imgtext] > div {margin-left:5% !important;}

    4– I will let @weaver answer

    5- not sure where you find a parallax block, I don’t see that in my weaver guttenberg plugin, If you are speaking of making the background parallax, please provide a page with the block setup the way you want so we can be sure of the CSS

    #56259

    scrambler
    Moderator

    B-1- You need to be more specific and provide a sample page.

    The 70% is responsive by definition, so please elaborate on exact configuration like # of column, and what you mean by that.

    2- It is strange that there is no alignment option for the image column block
    @weaver is that normal, because although there is no alignment option, I see a class align_none on the container, mixed with an inline style of text-align-center, which makes me wonder.

    @nele In the mean time you can use the rule below to change the column alignment.

    To affect both title an text use

    .wvrblocks-imgcols__text {text-align:left !important;}

    to affect only description text

    .wvrblocks-imgcols__desc {text-align:left !important;}

    text alignment can simply be done using the Alignment option of the editor (toolbar)

     

    #56261

    Nele
    Participant

    2. Yes, I know this, but doing so the text becomes centered 🙁 And putting more padding on the right side of the blog doesn’t change anything for mobile

    3. Works great, thank you!

    5. Yes, I mean the parallax background – the picture with the book in the hands of the man just before the footer. I reduced the window of my browser to look how it change. But I have just seen on my smartphone that it doesn’t work as parallax there. So I have to replace this block for mobile…

    #56262

    Nele
    Participant

    @scrambler, sorry I do not know what you mean with the item about 70%. I put the block width to 70%.
    Here is a picture, how it shows up on mobile:

    Screen shot of block

    Do I have to put extra CSS to it, in order to get two circles in one row, how it does with the block underneath?

    #56263

    Nele
    Participant

    .wvrblocks-imgcols__desc {text-align:left !important;} doesn’t work, as you can see. I have put it into the global CSS.

    #56265

    scrambler
    Moderator

    For the alignment, I just realize, you just need to use the alignment option in the editor window. (toolbar)

    #56266

    scrambler
    Moderator

    B-1 I do not see the issue. When I shrink the browser the columns are fully responsive.

    Do you have the problem when shrinking the browser, or only on an actual mobile device, if so which one

    EDIT, actually, I do see some problems, with some columns becoming bigger than others.

    There is a rule that override the base 25% wide base rule (below)

    /*@media screen and (max-width:767px)*/
    .wvrblocks-imgcols__has-4 .wvrblocks-imgcols__column-one, .wvrblocks-imgcols__has-4 .wvrblocks-imgcols__column-two, .wvrblocks-imgcols__has-4 .wvrblocks-imgcols__column-three, .wvrblocks-imgcols__has-4 .wvrblocks-imgcols__column-four {
    width: 48%;
    }

    But think that may be the flex CSS that allows some element to expand or shrink may not be set properly.

    Will have to look further.

    #56267

    Nele
    Participant

    I totally overlooked this…. – the easiest way to get the alignment, the way you want… thank you @scrambler

    #56268

    scrambler
    Moderator

    @weaver, there seem to be some problem with the flex CSS of the multiple columns.

    If you look at the section of her page that has 4 columns with a circled number at the top and text below, as you reduce the browser width, we get unequal width columns and they extend outside the container.

    I see two problems:

    The width is only set with %, but the flex-grow and flex-shrink are not set, which allows the columns to expand or contract. If you want to set a fixed width value, you need to set the grow and shrink to zero, using a rule like

    flex: 0 0 48%

    the other problem is that the flex-wrap is set to no warp, so when the columns switch from one row of 25% wide, to 48% wide, they do not wrap on two rows.

    strangely enough, she has two blocks of columns, and the second one (below) works ok.

    #56269

    scrambler
    Moderator

    A-2 Something strange is going on.

    For some reason, the 5em left and right padding that you have set on the block are being overridden and set to zero.
    I cannot figure out why as the CSS setting the padding is inline and should take precedence over the one overriding it.

    @weaver, doing some reading, it appears that using padding on a flex container can lead to calculation errors.
    It is recommended to use margin on the child rather than padding on the parent.

    @nele, for now, set the left and right padding of the block to zero, then use the rules below to create the space on the left and right. Note that if you change the value, you must adjust the width so the total remains the same.

    .myclass-1 .wvrblocks-imgtext__image {width:43%;margin-left:2%;}

    .myclass-1 .wvrblocks-imgtext__descriptions {width:53%;margin-left:2%;}

     

    #56270

    Nele
    Participant

    @scrambler I set the left and right padding of the block to zero and put the code with the important rule into the global css. Without !important it didn’t work. But now have a look: it isn’t responsive anymore.

    #56271

    scrambler
    Moderator

    First, I had a mistake, as you want a margin right in the second rule
    second you should only need important on the width.

    But I forgot the width was changed on phones, so you need to change the rules to the ones below

    .myclass-1 .wvrblocks-imgtext__image {width:43% !important;margin-left:2%;}
    .myclass-1 .wvrblocks-imgtext__descriptions {width:53% !important;margin-right:2% ;}

    .is-phone .myclass-1 .wvrblocks-imgtext__image {width:96% !important;margin-left:2%;margin-right:2%;}
    .is-phone .myclass-1
    .wvrblocks-imgtext__descriptions {width:96% !important;margin-left:2%;margin-right:2%;}

    #56275

    Weaver
    Keymaster

    I will be unable to look into this more until next week sometime.

    #56277

    Nele
    Participant

    @scrambler – it works fine! Thanks.

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.