Adaptable theme - Even out marketing blocks

Re: Adaptable theme - Even out marketing blocks

by Gonzalo tm -
Number of replies: 7

Hello, I am sharing my progress on this issue:

First, I removed "margin: 0 .5em;" from the code in the first row, and this solved the lack of vertical alignment smile

Then I added a yellow background to the first block to understand the actual size of the block (<div style="height: 350px;background-color:yellow;">). I set then height to 264 px to match the picture size. I have noticed this is set to 240px on the demo site of Adaptable.

Imágenes integradas 1

About the distance between rows: I didn't solve completely the differences between the vertical and horizontal separation of the blocks. Interestingly, they become equidistant when I set Chrome zoom to 90%. However, I see them equidistant on the demo site with 100%.

Adaptable support gave me this information:

"If you want to modify the margin between rows then you must modify using the class .marketrow (set by default to 20px)"

I checked, and both the demo site and my site were set to 20px indeed. 

Perhaps it has something to do with image responsiveness? Thanks!



Average of ratings: -
In reply to Gonzalo tm

Re: Adaptable theme - Even out marketing blocks

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi, 

It looks like the images you are using are not working because the address of these images are linked to your email account..Can you add the image using the Text Editor image button in the Text Editor window?

Thanks

Mary

Average of ratings: Useful (1)
In reply to Mary Evans

Re: Adaptable theme - Even out marketing blocks

by Gonzalo tm -

Hello! Sorry for the delay. I could finally solve almost all issues. 

Problem brief: even out two rows of marketing blocks, first with pictures, second with icon and text.

The screenshots of the process:

Step 1, blocks non-aligned (because I included a margin property without noticing), non equidistant (because of too much height):


Code of step 1 (taken from Adaptable's README):

<div style="height: 350px;">

    <img src="http://yoursite/yourimage.jpg" style="vertical-align:text-bottom; margin: 0 .5em;" height="auto" width="100%">

</div>

_______________________

Step 2, aligned, background highlighted to find the right height:


Code of step 2:

<div style="height: 350px;background:yellow">

    <img src="http://yoursite/yourimage.jpg" style="vertical-align:text-bottom;" height="auto" width="100%">

</div>

_______________

Step 3, aligned and equidistant:

<div style="height: 250px">

<img src=http://yoursite/yourimage.jpg" height="auto" width="100%">

</div>




My trouble is that I am using a 11.6" monitor (small laptop) and I have seen that the first and the second row overlap when displaying on a normal desktop monitor:



I have tried adding this:

<img src="....jpg" alt="" height="auto" width="100%" role="presentation" class="img-responsive atto_image_button_middle">

But then pictures won't fill all space available (see white frame around picture):



Do you have any ideas? Thank you very much!


Average of ratings: -
In reply to Gonzalo tm

Re: Adaptable theme - Even out marketing blocks

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Try taking out ... class="img-responsive"

then see if that makes any difference?

I think what may be happeing is that the styles for image-responsive contradict the styles you have added to the image.

If that does not work then make height="100%"

Average of ratings: -
In reply to Gonzalo tm

Re: Adaptable theme - Even out marketing blocks

by Fernando Acedo -
Picture of Plugin developers Picture of Testers

Could you test the demo site in your laptop?

The rows/columns layout is controlled by Bootstrap and never should modified mainly because is calculated on the fly so it shows the layout depending the screen width

Average of ratings: -
In reply to Gonzalo tm

Re: Adaptable theme - Even out marketing blocks

by Fernando Acedo -
Picture of Plugin developers Picture of Testers

This class is from Atto editor and is not for images. Also, you must use TinyMCE instead Atto.

 

class="img-responsive atto_image_button_middle"

Average of ratings: -
In reply to Fernando Acedo

Re: Adaptable theme - Even out marketing blocks

by Gonzalo tm -

Hello again and thanks for the feedback!

I am testing now on both small laptop (11.6") and desktop . The results are:

Desktop, Chrome zoom 110% and under: rows overlap. No blank space between them, blocks deformed (rectangles instead of squares).


Desktop, Chrome zoom 125% and over: blank space between rows, that grows with zoom. It seems to be zooming block height, which is fixed by code at 250px (see second row deformed, this time to greater verticality).


Picture size doesn't change much, except at 200%, where layout changes dramatically.


Laptop, Chrome zoom 90% and under: rows overlap. No blank space between them, blocks deformed (rectangles instead of squares).

Laptop, Chrome zoom 100% and over: blank space between rows, that grows with zoom.

Same situation, only coming with slightly different zoom levels.


All four blocks in the first row use this code:

<div style="height: 250px">

<img src=....jpg" height="auto" width="100%">

</div>

Which is the best option I have so far, the one I marked before as "step 3". This is the recommended code in Adaptable's README for images in marketing blocks. As you can see, I am not using class="img-responsive atto_image_button_middle"


I have tried changing height to 100%, as Mary suggested, but there are no improvements, overlapping is the same, on both screens, with the same zoom levels. No visible change.

All four pictures in the first row have a dimension of 354x354 pixels.

Perhaps you have some other suggestions?


Sorry Fernando, I don't understand when you say:

"The rows/columns layout is controlled by Bootstrap and never should modified mainly because is calculated on the fly so it shows the layout depending the screen width"

Did I try to modify anything of the rows/columns layout?


Thank you very much!

Average of ratings: -
In reply to Gonzalo tm

Re: Adaptable theme - Even out marketing blocks

by Gonzalo tm -

Testing Adaptable's demo site, I see that marketing blocks display squared at 125% on desktop and at 90% on laptop. Above that, blocks are rectangles, taller than wider, as it is normal.

There's no overlapping because there are no pictures.


So it's clear that browser zoom has a direct effect on the fixed height set on code (250px), while it's not affecting pictures (set with height and width 100%). I may try to set their size in px too.

So I guess this is the furthest I will get! Anyway, if you have any other hint on making pictures responsive inside these marketing blocks, I will give it a try. Thanks!


Average of ratings: -