Viewing 30 posts - 1 through 30 (of 32 total)
1 2
  • Author
    Posts
  • July 5, 2018 at 6:23 pm #981686
    Eagles1227

    Hi Support,

    I added a Grid Row Element (In a 1/3 layout) and when the cell does NOT have a link, there is no border. As soon as I make the cell linkable, a border shows. What gives? Is this supposed to happen? Pictures in the private section.

    Thanks!

    July 6, 2018 at 9:38 am #981929
    Rikard

    Hey Eagles1227,

    If you want to remove that you can try this in Quick CSS:

    .column-border:hover {
    border: none !important;
}

    Best regards,
    Rikard

    July 6, 2018 at 5:59 pm #982155
    Eagles1227

    Hi Rikard! I think you were looking at the wrong element. the ‘.column-border’ is custom css for adding a border around a cell. That works fine.

    I was referring to the 1/3 Grid Element. You’ll see that there is a white border around each column when a link is attached. It displays fine when there is not link but once a link is added, a border is added. You can see this by the images I provided in my original post.

    Thanks!

    July 6, 2018 at 11:17 pm #982267
    Jordan Shannon

    Hi,

    That is quite odd. Please add the following to quick css:

    #top .no_margin.av_one_third{
width:33.4%!important;
}

    Best regards,
    Jordan Shannon

    July 6, 2018 at 11:21 pm #982270
    Eagles1227

    It is weird. For some reason I have had layout issues. I even – in the beginning – deleted my install and reinstalled it. That code, however, did not work. Any other ideas?

    Thanks, Jordan!

    P.S. I cleared my cache and all, even added !important.

    • This reply was modified 6 years, 4 months ago by Eagles1227.
    July 6, 2018 at 11:56 pm #982285
    Jordan Shannon

    Hi,

    Do you have any other custom css that may be running? If so please make sure it is error free and formatted correctly. If its not it could effect the styling from my code. Also be sure to add my code to the very top of quick css so that it runs first.

    Best regards,
    Jordan Shannon

    July 7, 2018 at 12:27 am #982293
    Eagles1227

    I cut my css and pasted it into a text document, so all that was available was your css. It’s strange!

    EDIT: I am just forgoing this for now. Something is off with my layouts. I have used WPengine in the past and all, so I am not sure why. I will look into it then report back.

    Thanks!

    • This reply was modified 6 years, 4 months ago by Eagles1227.
    July 8, 2018 at 6:10 am #982628
    Rikard

    Hi,

    Thanks for the feedback. We’ll leave the thread open in case you should need any further help on the topic.

    Best regards,
    Rikard

    August 14, 2018 at 7:08 pm #997236
    understandchristianity

    I am having the exact same issue on the homepage of my site…

    understandchristianity.com

    It’s the “Timelines/Church Lingo/FAQ” grid row. Any help would be very much appreciated.

    Thanks!
    Brock

    August 14, 2018 at 8:38 pm #997274
    Jordan Shannon

    Hi,

    Do you mean the white lines outside of “Church Lingo”?

    Best regards,
    Jordan Shannon

    August 14, 2018 at 8:52 pm #997282
    understandchristianity

    The vertical lines between the orange and gray backgrounds of each grid row column. From CSS it seems there’s simply a gap, and the white lines are showing the background of the grid row element. Don’t know why there’s a 1-2px gap between the columns. And it’s only when the column is linked.

    August 14, 2018 at 9:16 pm #997311
    Jordan Shannon

    Hi,

    I see. Add this to quick css:

    #av-layout-grid-1 .no_margin.av_one_third{
width:33.4%!important;
}

    Best regards,
    Jordan Shannon

    August 14, 2018 at 9:57 pm #997321
    understandchristianity

    That did it for me! Thanks, Jordan!

    August 14, 2018 at 10:04 pm #997323
    Jordan Shannon

    Hey understandchristianity,

    Great! I’m happy to help.

    Best regards,
    Jordan Shannon

    August 14, 2018 at 10:07 pm #997324
    understandchristianity

    Wait, sorry, just checked one thing. The !important addition overrides the mobile responsiveness. At smaller screens it’s still 33.4%. What do I need to add to CSS to fix that?

    Thanks!

    August 14, 2018 at 10:16 pm #997328
    Jordan Shannon

    Hi,

    Add this to quick css:

    @media only screen and (min-width:767px)  {
#av-layout-grid-1 .no_margin.av_one_third{
width:33.3%!important;
}}

    Best regards,
    Jordan Shannon

    August 14, 2018 at 10:36 pm #997348
    understandchristianity

    Thanks, but it didn’t work. It cancels out the other one.

    August 14, 2018 at 11:23 pm #997363
    Jordan Shannon

    Hi,

    Remove !important from both.

    Best regards,
    Jordan Shannon

    August 15, 2018 at 12:59 am #997391
    understandchristianity

    Sadly, the first code you gave then gets overridden by the original code.

    August 15, 2018 at 11:03 am #997503
    Victoria

    Hi understandchristianity,

    Can you disable caching and minification for now?

    Best regards,
    Victoria

    August 15, 2018 at 5:40 pm #997622
    understandchristianity

    OK, it should all be deactivated now and ready for you.

    August 16, 2018 at 5:19 pm #998016
    Victoria

    Hi understandchristianity,

    Sorry, I still see the css files minified by the plugin.

    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

    August 16, 2018 at 5:59 pm #998039
    understandchristianity

    I cleared the Cloudflare cache. Try it now.

    August 16, 2018 at 6:40 pm #998068
    Jordan Shannon

    Hi,

    Clearing the cache should have allowed for the CSS given to work with each other.

    Best regards,
    Jordan Shannon

    August 16, 2018 at 7:22 pm #998094
    understandchristianity

    Sadly it didn’t. I was still getting the gaps on both Chrome and Firefox. But I did add this to the first code:

    @media only screen and (min-width:999px)  {
#av-layout-grid-1 .no_margin.av_one_third {
    width: 33.4% !important;
}}

    That seems to work for the gap issue at all widths in Firefox and Chrome. However, in Chrome and at smaller screens, I get this happening:
    grid columns off

    Any idea why that’s happening? It’s only in Chrome on a computer screen. It’s behaving perfectly on Android and iOS.

    August 17, 2018 at 1:01 pm #998406
    Victoria

    Hi understandchristianity,

    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

    April 1, 2019 at 6:36 pm #1085647
    understandchristianity
    This reply has been marked as private.
    April 2, 2019 at 9:07 am #1085945
    Victoria

    Hi understandchristianity,

    https://imgur.com/a/ynZwpC1 I am not seeing the issue on my end. Which screen sizes is it happening on your end?

    Best regards,
    Victoria

    April 2, 2019 at 9:53 pm #1086260
    understandchristianity

    Hi Victoria.

    It’s happening on screen widths under 767px and only on Chrome. Firefox and Edge seem to do just fine, as well as Android and iOS as far as I can tell.

    I know it isn’t a common screen size, but I just don’t know why it isn’t going down to one column in Chrome.

    Thanks,
    Brock

    April 6, 2019 at 11:37 pm #1087864
    Mike

    Hi,
    Sorry for the late reply, I checked your site at 767px on Chrome and found a couple of rules competing.
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

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

    This sould resolve the issue.
    Please see the screenshot in Private Content area.

    Best regards,
    Mike

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