Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • #1113264

    Im having some trouble with my grid row set up. I insert an image in the left column (2/3) and text in the right (1/3). i want the image to stretch full-width within the column. It works fine on large screens but when i look at it on a mobile device there is a huge space between image and correlating text (top and bottom). I need the text to sit close to the image. Probably an easy solution but i haven’t been able to find it. Any help would be greatly appreciated.

    Jacob

    #1113630

    Hey jacobedgren4,

    Yes, this is because there is padding between the paragraph.
    Can you show us a screenshot on how you want to make it?

    Best regards,
    Basilis

    #1113647

    This is how i need it to be in mobile view (link below).

    Jacob

    #1113904

    Hi,

    Thank you for the update.

    Are you referring to the whitespace or gap right after the post “Bellamy Brothers”? There is a separator/whitespace element after the color section containing the post. Was that added intentionally?

    Best regards,
    Ismael

    #1113938

    Hi
    No the link i posted is of a psd-document and shows how i whant it to look like on a mobile device. The space between the text and the image is ideal. When i use grid row (one column 2/3 with image and one 1/3 with text) it looks stellar on a computer but when i use mobile view, there is a huge white space between the text and the image above the text. This has forced me to use colour section
    and text columns instead, this way the image doesnt go fullwidth. Looks ok but not ideal. I would like the image to be fullwidth. I read something about flex columns. I can rearrange the layout so you can check it out if that helps.

    Jacob

    #1114227

    Hi Jacob,

    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 #wrap_all .flex_column.avia-builder-el-2,
       .responsive #top #wrap_all .flex_column.avia-builder-el-9 {
          width: 124%;
          margin-left: -2em;
      }
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1115512

    Hiya
    That worked like a charm on mobile devices (vertically). Is there a similar code i can use for tablets? Both horisontal and vertical please.

    #1115660

    Hi,

    Thanks for the update. You can target the ipad layouts with the following media queries:

    Landscape:

    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : landscape) { /* STYLES GO HERE */}

    Portrait:

    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : portrait) { /* STYLES GO HERE */ }

    You will likely have to adjust the CSS Victoria sent a bit though.

    Best regards,
    Rikard

    #1117086

    Thank you both for the help. It worked fine until i persuaded myself i needed a child theme (due to the many changes i had to do). Now it stopped working. The new code is still in the mother themes custom css (i imported settings to the child) but the effect is gone. Should i paste the code somewhere else or change it somehow?

    Jacob

    #1117193

    Hi Jacob,

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,
    Victoria

    #1117207
    This reply has been marked as private.
    #1117217

    If you look at it you will see that i removed the code from the mother theme custom css so dont be surprised by not finding it. I couldnt get it to work so i removed it.

    Jacob

    #1117524

    Hi Jacob,

    Sorry, it is confusing now. What is the remaining issue now?

    Best regards,
    Victoria

    #1117533

    Sorry about that. I wanted the Grease image and the Bellamy Brothers image to bleed on mobile devices and tablets (potrait). It did for a while but not anymore.

    Jacob

    #1117538

    I used your code in custom css (below) and it worked. Then i installed a child theme and it stopped working.

    @media only screen and (max-width: 767px) {
    .responsive #top #wrap_all .flex_column.avia-builder-el-2,
    .responsive #top #wrap_all .flex_column.avia-builder-el-9 {
    width: 124%;
    margin-left: -2em;
    }
    }

    #1117598

    Sorry to be a pain but in respons #1114227 you posted a private link that showed excactly how i want it.

    Jacob

    #1117959

    Hi,

    You should just create a copy of that section, but instead of using the color section or column, apply the image as the grid row element background. You can then toggle the visibility of these elements in the Screens Options panel.

    Best regards,
    Ismael

    #1117991

    Ok thanks. You can close this thread.

    Jacob

    #1118061

    Hi Jacob,

    Thanks for the update, I’ll go ahead and close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

Viewing 19 posts - 1 through 19 (of 19 total)
  • The topic ‘Grid row columns padding on mobile device’ is closed to new replies.