• Resolved Karlijn Maria

    (@karlijn-maria)


    Hi!

    We made some changes in the css editor. A lot of them work good on desktop and mobile, but two adjustments do not work on mobile, the site is topgeruimd.nl

    1 The first on is powered by is still shown on mobile, not on the desktop
    2 If you hover over a blogpost title is turn pink on mobile and grey on desktop.

    What can i do, that all the changes are also shown on mobile device?

    This is what i have in css, hope you can help me! Love Karlijn

    }

    .site-info {
    visibility: hidden;
    }

    .site-info:before {
    visibility: visible;
    content: “Website door Wesley Delpeut – Copyright ? 2016 Topgeruimd”;
    display: block;
    }

    .site-info {
    visibility: hidden;
    }

    .page-title, .entry-title, .entry-title a:hover {
    color: #666666;
    }
    }

Viewing 2 replies - 1 through 2 (of 2 total)
  • Your code doesn’t work in small screen because they are put into a media query, remove that code outside the media query and put it on its own will fix the problem.

    Also maybe we can consider using this code instead on the footer credit part. This code use display none on the site info div and add in our own text to its outer container.

    /* remove site credit */
    .site-info { display: none; }
    
    /* add our own footer credit */
    .site-footer::after { content: "Website door Wesley Delpeut - Copyright ? 2016 Topgeruimd"; display: block; }

    Or use this code, it’s the same as above but with adjustment for small screen.

    /* remove site credit */
    .site-info { display: none; }
    
    /* add our own footer credit */
    .site-footer::before { content: "Website door Wesley Delpeut"; display: inline-block; }
    .site-footer::after { content: " - Copyright ? 2016 Topgeruimd"; display: inline-block; }
    
    /* adjust for small screen */
    @media (max-width: 640px) {
    	.site-footer::before { display: block; margin-bottom: 5px; font-size: 120%; }
    	.site-footer::after { content: "Copyright ? 2016 Topgeruimd"; font-size: 90%; }
    }

    It’s worth noting that there is one big issue on the Custom CSS is implemented on the site right now. It seems to me that it contains a modified copy version of whole main theme style.css, if this is true it should get fixed, because doing it this way is hard to debug/manage and hard to keep it update with theme.

    The Custom CSS should only contains changes that we want to override.

    Thread Starter Karlijn Maria

    (@karlijn-maria)

    Thanks so much, it works!!!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Sela theme: changes in css editor are not shown on mobile’ is closed to new replies.