Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • May 27, 2021 at 11:43 pm #1302726
    atomcc

    Hi, Great theme. I have followed your directions on how to make a rounded border around two columns, but on mobile, since one column is pushed under the other, the borders just sort of not end (because I have hidden the center border).

    How can I make the border disappear under mobile. Also, I used some CSS to make sure the text and background is centered in the column and under mobile, they overlap.

    Any chance you could help?

    Thanks,
    Jeff

    .left_column_with_border {
    display: table;
    border-right: 0 !important;
    padding: 20px;

    background-color:#f1f1f1; border-radius: 16px;

    width:400px;
    height:502px;
    }

    .right_column_with_border {
    border-left: 0 !important;
    border-radius: 16px;
    }
    .avia-image-container-inner, .avia_image, .av-image-caption-overlay {
    border-radius: 16px !important;

    May 28, 2021 at 4:01 pm #1302862
    atomcc

    Hi, Thank you for suggesting that


    @atomcc    : Try to wrap the css code inside a css media query so that the changes only apply to desktop view.

    @media only screen and (min-width: 768px) {
    /* Move css code here */

    As you can see, it works – thank you!!!

    However the border radius info (which I set for border in the element options) carries over to the bottom. Is there anyway I can round ALL the corners when on mobile, but obviously I don’t want to do that when on deskop.

    Since the setting is a tick box in the element GUI, how do I round all the corners on mobile?

    Also, is there a way of not having the image on the right hand side just drop to the next row underneath when the screen is smaller than 1280px? If I set the @media only screen and (min-width: 1280px) I get a weird border separating the two columns.

    Thanks very much for your assistance, I appreciate it.
    Jeff

    • This reply was modified 3 years, 6 months ago by atomcc.
    May 28, 2021 at 9:05 pm #1302883
    atomcc

    Hi can anyone help me with this before the weekend? Thanks again!
    Jeff

    May 30, 2021 at 5:36 am #1302998
    Rikard

    Hi Jeff,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
.page-id-240 #av_section_1 .flex_column {
    border-radius: 16px !important;
}
}

    Best regards,
    Rikard

    May 30, 2021 at 10:33 am #1303009
    atomcc

    Hi,

    Thank you very much for your help! You are quick to get back to me and I really appreciate it.

    It did not solve the border radius problem, however I was able to add back all the border lines (that are hidden in the middle on desktop) by using:

    @media only screen and (max-width: 767px) {
    .page-id-240 #av_section_1 .flex_column {
    border-radius: 16px !important;
    }
    .left_column_with_border {
    border-right: 1 !important; border-radius: 16px !important;}

    .right_column_with_border {

    border-left: 1 !important; border-radius: 16px !important;

    }

    This unfortunately didn’t override the settings I have in the two columns for border radius (but by adding border-right 1 to .left_column_with_border and border-left: 1 for .right_column_with_border)

    It still defers to the border radius settings in each column set in the properties of each column.

    Do you know what to do?

    Thanks again for your assistance!
    Jeff

    May 31, 2021 at 4:02 pm #1303218
    Yigit

    Hi Jeff,

    The code Rikard posted above should have worked. Could you please use this website – csslint.net/ and check your custom CSS code for errors? Also, please make sure to flush cache.

    If that does not help, please post temporary admin logins here privately so we can look into it :)

    Best regardsA
    Yigit

    May 31, 2021 at 6:37 pm #1303249
    atomcc

    Hi, it does say that I am missing an RBRACE at line 25 but it is there. I have the code in there that Rikard suggested.

    See below for login. Could you have a look?

    Thanks for your help.

    Jeff

    May 31, 2021 at 8:41 pm #1303261
    Yigit

    Hi,

    Following media query was missing a closing curly bracket

    @media only screen and (min-width: 768px) {

    I added it right before the second media query you have in your code and that helped.

    Please review your website :)

    Best regards,
    Yigit

    May 31, 2021 at 9:16 pm #1303267
    atomcc

    Hi,

    Thank you – looks great! Again, thank you! Sorry about that missing bracket.

    One more question – I promise! At around 1450 pixels, the picture slides into the left element.

    Any way to block the picture from sliding over and overlapping the text, at less than 1450px but greater than the 768px that is in mobile view.

    Again, I really appreciate your help. I had no idea that it was going to require so much code!
    Thanks!
    Jeff

    June 3, 2021 at 12:03 am #1303667
    atomcc

    Any chance someone could assist me with the right element that slides over on top of the left element? Is there a way to prevent this?

    Thanks again for all of your assistance!
    Jeff

    June 3, 2021 at 3:28 pm #1303791
    Nikko

    Hi Jeff,

    We apologize for the delayed response.
    The reason why it’s overlapping is because the width is fixed in this code:

    .left_column_with_border {
    display: table;
    border-right: 0 !important;
    padding: 20px;
    background-color:#f1f1f1; border-radius: 16px;
    width:400px;
    height:502px;
}

    I think it would be better to have it in one column.

    Best regards,
    Nikko

    June 3, 2021 at 8:52 pm #1303881
    atomcc

    Hi,

    That is what I have on the main page already.

    Sorry to be curt, but sticking some text on the left, a picture on the right with a border around it shouldn’t be too hard. We’ve spent weeks going back and forth on a page that could be made with HTML in like 10 minutes. I thought using the CMS would be faster (and it will be better when the client wants to change the text.)

    I have listed the main page below and an alternate page with one column as well. I was trying to align the image to the right using HTML and that won’t work.

    This theme is really prolonging a simple project. Please let me know if you can help. I was one step away from what the client wanted – can you help with some specific instructions?

    Thanks again for your previous help.

    June 4, 2021 at 12:16 am #1303897
    atomcc

    The only reason the column width is fixed is that for some reason I need that and the padding to keep the grey background for the text element aligned with the text…

    June 4, 2021 at 1:29 am #1303904
    Nikko

    Hi atomcc,

    I only mentioned the cause of the issue.
    I have removed left_column_with_border and right_column_with_border on the Custom Class CSS (still in Quick CSS), then add this in Custom CSS Class in Color Section ktf-section.
    Then added this CSS code in Quick CSS:

    #top .ktf-section .av-equal-height-column-flextable {
    border: 1px solid black;
    border-radius: 16px;
    padding: 20px;
}

#top .ktf-section .av-equal-height-column-flextable .av_one_third {
    background-color: #f1f1f1 !important;
    border-radius: 16px !important;
    border: none !important;
}

#top .ktf-section .av-equal-height-column-flextable .av_two_third {
    border: none !important;
    padding: 0 !important;
}

    Please review your site, let us know if you need to make adjustments to it.

    Best regards,
    Nikko

    June 4, 2021 at 5:20 pm #1304113
    atomcc

    Thank you so much! This amazing. You guys are the best.

    Obviously I have a bit to learn using the Google developer tools but thank you for sorting it out. I had tried to use the color wrapping before but it didn’t work and now I know why.

    Again, I can’t thank you enough. I really appreciate it.
    Have a great weekend!
    Cheers,
    Jeff

    June 5, 2021 at 8:02 am #1304187
    Nikko

    Hi Jeff,

    You’re welcome, it’s a pleasure to help you :)
    If you need assistance with some CSS tweaks for your Enfold site, you can always open up a new thread and we’ll be happy to help.
    Thanks as well for using Enfold and have a great weekend!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘How do I get rid of borders in responsive (mobile) ?’ is closed to new replies.