Is there a way to replace my logo with a smaller image when visitors view my website on mobile or tablet devices, while hiding the desktop version of the logo?
This question pertains to using Wordpress, the genesis framework, and a child theme.
Visit http://www.caspercreations.ie for more information
After struggling with the issue, I finally found the solution to my initial problem:
@media (max-width: 480px) {
.site-title a {
background: transparent url("http://examplewebsite.com/mobilelogo.png") no-repeat scroll 0 0 !important;
overflow: auto;
}
}
}
@media (min-width: 480px) and (max-width: 768px) { .site-title a { background: transparent url("http://examplewebsite.com/tabletlogo.png") no-repeat scroll 0 0 !important; display: block; } }
Furthermore, I managed to address the gap between the logo and the main content by implementing the following code:
.header-full-width.header-image .site-title a {
background-position: center bottom !important;
}
If you have a background image as your logo, here is the CSS code to use:
@media (max-width: 480px){
.logo a { background: url('path-to-mobile-logo') no-repeat 0 0; }
}
If your logo is contained within an img tag, follow this structure:
HTML:
<a class="logo">
<img src="desktop-logo" alt="" class="logo-img logo-img-desktop">
<img src="tablet-logo" alt="" class="logo-img logo-img-tablet">
<img src="mobile-logo" alt="" class="logo-img logo-img-mobile">
</a>
CSS:
.logo-img { display: none; }
@media (min-width: 1025px){
.logo-img-desktop { display: block; }
}
@media (min-width: 768px) and (max-width: 1024px){
.logo-img-tablet { display: block; }
}
@media (min-width: 320px) and (max-width: 480px){
.logo-img-mobile { display: block; }
}
Make sure to implement the following selector accurately:
@media (max-width: 768px) {
.header-image .site-title > a {
background-image: url('images/your-mobile-logo.png');
}
}
document.getElementById('scdiv').innerHTML=Quantity <td id="scdiv"> </td> document.getElementById('quantitydiv').innerHTML=mrp <td id="quantitydiv"> </td> I am currently facing an issue where the code is being d ...
How can I display a full background image in Ionic 1.2? -hooks -platfroms -plugins -resources -scss -www -css -img -js -lib -templates ... Currently, I have the following HTML structure: <ion-view id="login" hide-nav-bar="true"> ...
I am having trouble centering my menu on the website. While other elements like images are centered, the menu seems to be off-center. Below is a snippet of the CSS code related to the menu: @charset "UTF-8"; /* CSS Document */ #nav { width:975p ...
Can anyone help me with adding a responsive background image between the header and footer of my website? I want to make sure the background image changes randomly on each page load from a set of 5 different images. I've made some progress, but I&apo ...
I am struggling to properly implement a carousel using the data from my Videos Array. Instead of getting the desired output where videos should slide one by one, all the videos in the Array are being rendered at the same time. <div id="carouselEx ...
I am working with multiple functions that are triggered by scrolling the mouse wheel up and down. These functions must be called in a specific order, but the issue arises when users scroll quickly causing the CSS animations from the previous function to ...
I have an organized list with links, but when I add a link that requires a specific ID, the CSS is not applied to it. Since the CSS only targets li a:link{}, how can I make it recognize the specified ID too? The ID 'swishLink' is used in multip ...
I am currently working on a Wordpress website using the music macho theme. The main website (https://techtreetweb.000webhostapp.com/) consists of full-width pictures. However, when I try to add extra pages, those pages always have a white margin to the l ...
I recently customized a bootstrap navbar by changing the color, background-color, and hover color. However, after making these modifications, I noticed that the navbar is no longer fixed in place. Despite my limited knowledge of CSS, I tried to find a solu ...
I'm interested in creating a primarily static site using Next.js, but I also need the ability to provide customers with price estimates based on their specifications. The calculation process needs to be kept private and not exposed to anyone else (oth ...
My code displays posts using cards perfectly, but I've been unsuccessful in trying to switch it to a carousel. I'm aiming to implement the same carousel design featured in this link. Carousel reference: <?php //var_dump($get_packages_list) ...
Check out this example http://jsfiddle.net/4cu8m/ <div id="main1"> <div id="inner1"</div> <div id="inner2"</div> </div> The positioning of inner1 and inner2 in the CSS are identical. They are both absolutely ...
When I have a long description, the prices appear misaligned. You can take a look at it here: https://i.sstatic.net/aXgaj.jpg For the JSFiddle example, visit: https://jsfiddle.net/2n19tv75/ .border-gray { border: 1px solid #e5e7eb; float: left; w ...
Currently, I am working on a test scenario where I need to confirm that altering an option in a dropdown menu modifies the styling of the page. I am curious if Webdriver has the ability to retrieve the URL of the CSS document from an element. This appear ...
I'm currently working on a login page for a website and I've added a toggle button as a label for a checkbox. However, I'm struggling to toggle the active/inactive state of the class using JavaScript click EventListeners. Any suggestions or ...
I've been attempting to develop a container with two components that slide in when clicked, swapping one for the other, but I want them to only be visible within the container. Here's my not-so-great code, please help me out. HTML <input id ...
Currently working with SCSS and have a variable $arial: 'Arial', serif; Now the plan is to implement the following: .english{ $arial: 'Arial', serif; font-family: $arial; } .japan{ $arial: 'Noto Sans'; font-f ...
While browsing a website, I came across some intriguing elements and decided to investigate further. Here is what the element looked like: Upon examining the CSS definition: .entry-meta .date a:before { content: "\f303"; } I am aware that image ...
I'm currently working with a list in Angular 2 and utilizing recursive rendering techniques as shown in this tutorial. While displaying the list as an unordered list works perfectly fine, I wanted to experiment with a collapsible list structure simila ...
Is there a way to change the border color of a text input field to blue when it is not selected and then change it to orange when the field is selected? input[type="text"]{ border: 1px solid blue; } input[type="text"]:focus{ border: 1px solid ora ...