Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1052821

    I have a blog grid and partner element and when I reduce the width of the screen, rather than going into a full width single column as it used to. I now get one full width single column image, then two column, then one again etc.

    The link is: http://tweeddale.digitalessence.net/

    and here are some screenshots:

    View post on imgur.com

    and

    View post on imgur.com

    There’s nothing in my custom CSS that is causing this and I don’t think it is expected behaviour.

    #1052867

    Hey DigitalEssence,

    https://cl.ly/ed76715ae23d This is the way the post slider is currently functioning.

    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 .slide-entry {
          width: 100%;
      }
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1052880

    Thanks Victoria, that’s the Post slider working as expected.

    I’d added the margin-left:70px; as I was trying to remove the margin/padding from around the 1/5 and 4/5 columns so they were full width. I will revisit my code.

    Do you have a similar fix for the partner/Logo Element as even if I remove all of my custom code, the layout issue is still present.

    Thanks.

    #1053498

    Hi,

    Which device are you checking this with? You can use this css code to adjust the width of the logo entry on mobile view..

    @media only screen and (max-width: 768px) {
    .responsive #top #wrap_all .avia-content-slider-odd .slide-entry {
        margin-left: 0;
        clear: both;
        width: 100%;
    }
    }

    Best regards,
    Ismael

    #1054249

    Hi,

    I’m using Chrome browser to test the responsive breakpoints and this is where I am seeing the issue with the large image with smaller images below.

    #1054269

    I’ve also got an issue with a 1/5 column and 4/5 where the blog posts overlap the 1/5 title (h1) as the screen is reduced before everything snaps to single column.

    I’ve removed all of my custom coding from the css so this is just Enfold.

    View post on imgur.com

    #1055153

    Hi DigitalEssence,

    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 (min-width: 768px) and (max-width: 1024px) {
      h1 {
        font-size: 20px;
      }
      div .av_one_third {
          width: 31.333333%;
      }
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

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

You must be logged in to reply to this topic.