custom css not applying to mobile

  • Resolved oldguitar

    (@oldguitar)


    6 years, 7 months ago

    hi, some of my custom css is not applying to mobile, if you can check my site: oldguitarstore.tk at the bottom there is a contact widget with some style, I can′t see this style in mobile while the other things in custom css do apply. I also get a message is custom css that there is an error to correct but I see nothing with the red cross and I can keep adding and saving more css.
    Please help.
    Regards in advance

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hi there,

    Could you post the CSS you’ve added please? I’ll take a further look.

    Also, where abouts in WordPress are you adding your custom CSS?
    e.g. The customizer, a child theme, etc?

    Thanks,
    Rob

    Hi,

    It seems that the CSS that’s making the footer elements look nice on computer are wrapped into a media query https://imgur.com/a/vvMNYbY. In order to make the mobile side look the same way, you can simply copy the following CSS to the Appearance → Customize → Additional CSS area:

    .mail1 {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0px 5px 3px #666666;
    -moz-box-shadow: 0px 5px 3px #666666;
    box-shadow: 5px 5px 2px #666666;
    font-size: 15px;
    padding: 3px 10px 6px 20px;
    border: solid 4px;
    border-bottom-width: 9px;
    width: fit-content;
    background: #f2da79;
    margin-top: 10px;
    margin-bottom: 10px;
}
    Thread Starter oldguitar

    (@oldguitar)

    hi Radu,

    that code is already in Additional CSS area

    Thread Starter oldguitar

    (@oldguitar)

    Rob, the additional code is in Appearance → Customize → Additional CSS area of my generatepress theme, thanks.

    Hi,

    It seems that the CSS is wrapped into a media query. Please check the whole custom CSS. It seems that the previous snippet:

    @media (min-width:769px) {
.main-navigation .main-nav ul li.search-item:hover a{
background: #fc9f3c;
-webkit-box-shadow: 0px 0px 0px #666666;
  -moz-box-shadow: 0px 0px 0px #666666;
  box-shadow: 0px 0px 0px #666666;
	border-width:2px;
}

    doesn’t have a closing bracket for the media query. You should have two brackets ( }} ). The same applies for all the other media queries. Once you open and close all the brackets the right way, I’m sure that the footer will look fine on mobile too.

    Cheers!

    Thread Starter oldguitar

    (@oldguitar)

    well done mate!
    thank you

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘custom css not applying to mobile’ is closed to new replies.

Tags