Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • January 20, 2017 at 3:39 pm #736533
    efletcher

    As suggested by Ismael this is a new post regarding an issue I have with advanced styling for buttons not being applied when viewing the desktop version of the site. It works responsively though?

    Basically there is particular piece of code below, which is knocking out the curved edge look so the button appears rounded. I do have quite a bit of custom css but I eliminated all other code by deleting one by one and this was the only section that affected the styling. Does anyone have any theories why this might be and offer a solution for me?

    Thank you.
    Emma

    @media only screen and (max-width: 767px) {
    .responsive .logo a {
    display: inline-block;
    vertical-align: middle;
    }

    January 22, 2017 at 7:43 am #736897
    Rikard

    Hey Emma,

    I’m not sure where you got the code from Ismael, could you link to where we can see the problem and try to explain a bit further please? A screenshot highlighting your intentions might help us understand better.

    Best regards,
    Rikard

    January 24, 2017 at 12:04 pm #737675
    efletcher

    Hi Rikard,

    before code is inserted in to page

    Here is a link for the before image. Here you can see that the logo at the top is left aligned and the button styling is rounded as desired.

    after code is inserted into quick css

    Here is the image after. As you can see by just adding that piece of code it turns off the rounded styling.

    The strange thing is it only knocks out the styling on desktop, as when viewed on a mobile device it presents itself as required.

    Hope someone can help. Thank you.

    Below is a full copy of my quick css for reference.

    .logo img {
    top: 10px !important;
    }

    .widgettitle { font-size: 20px!important; }

    div .copyright {
    width: auto!important;
    }

    .av-image-caption-overlay-center p{
    margin-top:100px !important;;
    }

    .avia-button {
    font-size: 25px!important;
    }

    .av-section-bottom-logo.header_color .container {
    background-color: rgba(255,255,255,0.5) !important; }
    .av-section-bottom-logo.header_color + div + .avia-section {
    margin-top: -135px;
    }

    .av-section-bottom-logo.header_color .container, .av-section-bottom-logo.header_color .container .inner-container {
    width: 100% !important;
    max-width: 100%;
    }

    @media only screen and (max-width: 767px) {
    .responsive .logo a {
    display: inline-block;
    vertical-align: middle;
    }

    .responsive .logo {
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    }

    .logo img { max-height: 48px; }
    @media only screen and (max-width: 767px) {
    .responsive .logo a, .responsive .logo img {
    max-width: 80%;
    height: auto !important;
    margin-bottom: 10px;
    }}

    .responsive .toggle_icon {
    width: 15px !important;
    }

    January 25, 2017 at 6:04 am #738118
    Rikard

    Hi,

    Thanks for the feedback, please try this to see if you have any luck with it:

    .avia-button.avia-size-large {
    border-radius: 25px;
}

    Best regards,
    Rikard

    January 25, 2017 at 12:22 pm #738295
    efletcher

    Hi Rikard,

    That seems to have solved the problem so long as I place the code above the one causing the problem.

    Thank you this thread can be closed now.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Advanced styling issue – effect not showing on desktop’ is closed to new replies.