How to adjust logo for Divi Mobile Site?

At the point when over portion of the world is perusing on cell phones, it’s a smart thought to invest some additional energy into ensuring your sites look idealize on them. Fortunately, I’ve done a portion of the truly difficult work for you. In case you’re utilizing Divi, you can without much of a stretch demonstrate an alternate (i.e. more straightforward) logo on versatile with some CSS.

This is particularly useful for individuals who have complex logos and more straightforward partners, or the individuals who need to accomplish a more moderate feel on cell phones where content turns out to be more confined. Here’s the means by which to do this in almost no time with some CSS:

1. Transfer your “versatile” logo to your site and get its URL.

To do this, simply explore to your administrator dashboard, drift over “Media” and snap “Include New”, at that point select the document from your PC. When it transfers, tap the little “Alter” interface that shows up on the correct side of the page. Duplicate your transferred record’s URL on the privilege and glue it into a Word archive or plain content document for some other time.

2. Add the following CSS to your website.

@media only screen and (max-width: 981px) {
/* Changes mobile logo to specified image */
#logo {
content: url("https://site.com/logo.png");
}
}

3. See the line that says content: url(“…”); in Step 2? Add the URL you grabbed from Step 1 between the quotes. Make sure it starts with http:// or https:// and is still surrounded by the quotation marks.

4. Save your changes, then take your website on a test drive. When it works, high five your computer screen! …wait, no, don’t do that. That’s probably a bad idea.