Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • April 10, 2018 at 7:13 am #939616
    capuchin

    Hi!

    Please view http://dev3.mimoa.co.za and/or http://dev3.mimoa.co.za/simera-group/simera-consult/
    screenshot http://dev3.mimoa.co.za/screenshot/

    I have used columns equal height – alignment top – no space between columns – border 3px
    Column 1: textblock
    Column 2: image

    The problem is when resizing/pulling smaller the browser window or viewing the website on a smaller laptop (screen size) – only the images resizes quickly, the text size stays the same, therefore there are gaps appearing – things look not aligned.

    Is there a solution to this?

    I could make all the text images? But I would prefer if you have another idea, please?

    Thank you in advance!!

    Kind regards
    Capuchin

    April 10, 2018 at 12:58 pm #939845
    capuchin

    Hi !

    One work around for the above problem is to have responsive mode only for mini tablets and smart phones, is it possible to
    selectively display responsive mode for small screens only?

    Thank you!!

    Kind regards
    Capuchin

    April 10, 2018 at 11:51 pm #940074
    Basilis

    Hi,

    Unfortunately, it would require quite some time and customization of the theme to achieve this, so I am sorry to tell you that this is not covered by our support. However, if it’s really important for you to get this done, you can always hire a freelancer to do the job for you :)

    Best regards,
    Basilis

    April 11, 2018 at 9:12 am #940297
    capuchin

    Hi Basilis

    Thanks for your reply. Do you refer to my question about the column heights or do I need a freelancer for the second question: responsiveness only for screen widths smaller than 736px ?

    For example use something similar to this. Disable responsive mode for certain colorsections with IDs etc?

    @media only screen and (max-width: 1024px) {
    nav.main_menu {display:none !important;}
    #advanced_menu_toggle, #advanced_menu_hide {display:block !important;}
    }

    Thanks,
    Capuchin

    April 12, 2018 at 5:17 am #940766
    Victoria

    Hi Capuchin,

    There is too much text for the perfect alignment to be there all the time, it should be 3-4 lines max and then when the image scales the text stays within the height, other than that, you can try to stretch the image vertically but it will not look good. Or you could stretch the image wider and taller and just sow a part of it.

    Let me know what you think.

    If you need further assistance please let us know.
    Best regards,
    Victoria

    April 12, 2018 at 7:35 am #940798
    capuchin

    Hi Victoria

    Your are brilliant! Thank you for your input.

    I did this on http://dev3.mimoa.co.za/simera-group/simera-sense/ now:

    First column text block – column set to equal height -> second column has a back ground image which shows/shrinks accordingly!

    But: the column with background image doesn’t show on smart devices (I guess, because it is without ‘content’). The moment it puts the columns under each other the images don’t show… Could you help me there perhaps with CSS?

    Kind regards
    Capuchin

    April 12, 2018 at 10:57 am #940854
    capuchin

    Hi again!

    I am trying this CSS (my column class is ‘businessunit’)

    @media only screen and (max-width: 767px) {
    .businessunit {
    min-height: 400px !important;
    }}

    This CSS works kind of. Hope you have a better idea!
    Kind regards
    Linda

    April 12, 2018 at 12:06 pm #940874
    capuchin

    To explain this better:

    The back ground images show on all devices now, but with different gaps between text block columns and background image columns.

    Please view screenshot here: http://dev3.mimoa.co.za/screenshot-smart-device/
    or here http://www.responsinator.com/?url=http%3A%2F%2Fdev3.mimoa.co.za%2Fsimera-group%2Fsimera-sense%2F

    Kind regards
    Linda

    April 13, 2018 at 12:23 pm #941443
    Victoria

    Hi Linda,

    Great progress!

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 767px) {
 .responsive #top .container .av-content-small,
 .responsive #top #wrap_all .flex_column, 
 .responsive #top #wrap_all .av-flex-cells .no_margin {
    margin: 0;
 }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    April 13, 2018 at 2:23 pm #941511
    capuchin

    Success! Thank you so much.
    Have a nice weekend!

    Kind regards,
    Linda

    April 14, 2018 at 5:35 am #941807
    Rikard

    Hi,

    Great, glad you got it working. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.