Tagged: , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • January 11, 2019 at 6:03 pm #1052821
    DigitalEssence

    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.

    January 11, 2019 at 7:46 pm #1052867
    Victoria

    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

    January 11, 2019 at 8:13 pm #1052880
    DigitalEssence

    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.

    January 14, 2019 at 3:53 am #1053498
    Ismael

    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

    January 15, 2019 at 6:36 pm #1054249
    DigitalEssence

    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.

    January 15, 2019 at 6:55 pm #1054269
    DigitalEssence

    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

    January 17, 2019 at 9:06 pm #1055153
    Victoria

    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

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