Topic Resolution: Resolved
  • Closed
  • Johnny Good
    Spectator
    April 24, 2015 at 5:33 pm #16818

    Hi,

    I’m trying to make content boxes round and in CSS
    I have this:
    .XXXX {
    margin:0 0 25px;
    overflow:hidden;
    padding:20px;
    background-color:#6BD5F1;
    border:1px solid #afcde3;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    }

    But how do I specify all boxes? what do I put under X?

    Thanks

    Johnny Good
    Spectator
    Posts: 90
    April 26, 2015 at 9:47 pm #16910

    Hmm, very interesting. My primary browser is Chrome. When I tried with Internet Explorer and Firefox it displays fine only in Chrome it doesn’t and it’s only this one widget. Not a big since it’s only on one browser.

    Roman
    Spectator
    Posts: 3147
    April 26, 2015 at 10:13 pm #16913

    Clean the browser cache

    Anonymous
    Inactive
    Posts: 49
    April 26, 2015 at 10:32 pm #16919

    Open style.css file and find this:

    .widget-content

    around line 431 and remove this line:

    position: relative;

    or just mark it like this:

    /*position: relative;*/

    And your widget will have normal round borders like others.

    Regards

    Johnny Good
    Spectator
    Posts: 90
    April 26, 2015 at 10:37 pm #16920

    Tried cleaning browser cache in Chrome, still same 🙁

    Johnny Good
    Spectator
    Posts: 90
    April 27, 2015 at 12:15 am #16929

    Thanks Jaroslav that worked and I had to clear cache afterwards.
    Now when checking on mobile other widgets have same issue?

    Since I’m modifying /wp-content/themes/evolve-plus/style.css main file, do I run a risk of messing up something else?

    I do have Evolve child theme and all of modifications are done thru theme’s custom CSS. Can I add modifications there?

    Thanks!

    Johnny Good
    Spectator
    Posts: 90
    April 27, 2015 at 12:15 am #16930
    This reply has been marked as private.
    Roman
    Spectator
    Posts: 3147
    April 27, 2015 at 9:29 am #16939

    try to add in your Custom CSS yet:

    .widget-title-background {
    -webkit-border-radius: 20px 20px 0 0;
    border-radius: 20px 20px 0 0;
    }

    Johnny Good
    Spectator
    Posts: 90
    April 27, 2015 at 6:31 pm #16996

    Went in style.css main file and removed that comment.
    Added above to my custom CSS and on mobile its still the same using chrome browser even after clearing cache.
    Tried using default browser that came with the phone and its displayed fine?
    Must be issue with Chrome browser on the phone, do you get same effect using Chrome on mobile?

    Thanks!

    Roman
    Spectator
    Posts: 3147
    April 27, 2015 at 7:33 pm #17001

    update the code, so it will look like:

    .widget-title-background {
    -webkit-border-radius: 20px 20px 0 0;
    border-radius: 20px 20px 0 0;
    margin-top:11px;
    }

    Johnny Good
    Spectator
    Posts: 90
    April 27, 2015 at 8:02 pm #17007

    Is above code everything needed to make rounded corners or I need to add it to existing ?

    /*rounded widget corners START */
    .widget-content {
    margin:0 0 25px;
    overflow:hidden;
    padding:0 15px 20px 15px;
    border:1px solid #afcde3;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    }
    .widget-title {
    padding-top:20px;
    }
    .widget-title-background {
    -webkit-border-radius: 20px 20px 0 0;
    border-radius: 20px 20px 0 0;
    }

    /*rounded widget corners END*/

    or

    /*rounded widget corners START */
    .widget-title-background {
    -webkit-border-radius: 20px 20px 0 0;
    border-radius: 20px 20px 0 0;
    margin-top:11px;
    }
    /*rounded widget corners END*/

Viewing 10 replies - 11 through 20 (of 23 total)