Tips for adjusting the size of your logo for the mobile edition of your WordPress site

I have been attempting to adjust the size of our website's logo ( ) for mobile viewing, but so far no code has proved effective. I've tested various iterations like the one below without success:

@media (max-width: 360px) {
    .site-branding img {
        max-width: 50%;
        max-height: 50%;
    }
}

I am unsure which CSS adjustment is needed for mobile view only, and I prefer not to alter anything on desktop view. Any advice would be greatly appreciated.

Thank you in advance for your help.

jqueryhtmlcsswordpress

Answer №1

Your site appears to have implemented an optimization plugin, so it's recommended to clear the cache after adding your CSS code to either the custom CSS section or the theme's CSS file in order to observe the changes taking effect.

Simply specifying the width or max-width should suffice, as the height can often be managed automatically.

@media (max-width: 360px) {
    .site-branding img {
        max-width: 50%;
        height: auto;
    }
}

Answer №2

The coding appears to be in good shape. It is designed to function for resolutions under 360px, but you may adjust it to 767 if necessary, as anything below the resolution of an iPad is considered mobile. No need to include a max-height parameter, as this code alone should suffice. Feel free to customize the resolution to suit your needs. I took a look at your website and did not find this particular CSS code.

@media (max-width: 767px) {
  .site-branding img {
    max-width: 50%;
  }
}

Answer №3

I believe it should work, but it seems like the styles above are not being applied properly. You can enhance the media query as shown below: 

@media only screen and (max-device-width: 480px) {

}

Also, please double-check if your CSS is uploaded correctly because when I checked here, I couldn't find the media query for site-branding.

Answer №4

Experiment with this code for various screen sizes.

@media (max-width: 767px) {
  .site-branding a img {
      width: 50%;
   }
}
@media (max-width: 360) {
  .site-branding a img {
      width: 23%;
   }
}

The 767px code may not be necessary, but utilizing the above code will decrease the width in percentage (%), which might appear awkward at 767px screen size.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I wonder which Material Design repository is the source of this library

I am attempting to replicate the CSS style used in this particular Material Design-inspired web application: https://i.stack.imgur.com/utalx.png After exploring Materialize CSS and MUI, I have not been able to pinpoint the exact framework responsible for ...

htmlcssreactjsmaterial-design

What are the benefits of using Semantic mark-up and WAI-ARIA in a Tabbed Section?

Currently working on the structure of a website and aiming to improve accessibility skills. I'm curious about the most appropriate way to mark up tabbed content. Here's what I have so far: <section> <nav> <a href="#tab" aria ...

htmlaccessibilitywai-aria

Displaying a value in a React component using material-ui's TextField

Can anyone help me with printing the email a user enters into the textfield within the Dialog when a button is clicked? I have been struggling to achieve this due to my function's structure. Any guidance would be greatly appreciated. export default fu ...

javascriptcssnode.jsreactjsmaterial-ui

Show the Div container when one of the checkboxes is selected

Currently, I have implemented a show/hide functionality for a div element when a checkbox is clicked. The div appears and remains visible until all checkboxes are checked; however, if no checkbox is checked, the div disappears. The issue I am encountering ...

jquery

Trying to conceal the scrollbar on MS Edge and Firefox?

Currently, I am working on a scrollable menu that requires the scrollbar to be hidden. In Chrome, I have achieved this by using the following code: .menu::-webkit-scrollbar { display: none; } I would like to know if there is an equivalent solution ...

htmlcssfirefoxscrollbarmicrosoft-edge

Is there an issue with the encoding causing the SQL to not work in PHP?

I've encountered a strange issue with my SQL code. It works perfectly fine when I run it in phpMyAdmin, but when I try to execute it in my PHP script, it doesn't return anything. I initially thought the problem might be with the encoding (since i ...

phpmysqlsqlwordpress

Step-by-step guide: Creating a captivating triangular shape on the current tab

I am trying to implement a dynamic tab using Bootstrap where clicking on a tab will display a thicker black underline, like in this image: https://i.stack.imgur.com/h48GB.png To achieve the black line effect, I have added the following code: .nav-tabs.n ...

htmlcsstabshoverselected

How can I align a button in the center using Bootstrap 4?

<div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-8"> <div v-for="job in job"> <div class="text-center"> <h1>{{ job.job_title }}</h1> <p> ...

csstwitter-bootstrapbootstrap-4

Saving the selections from two drop-down menus into a single variable

I have a requirement to store the user selected values from two dropdown menus. These dropdowns are created using the selectize library in HTML: <div style="max-width: 200px"> <select id="dropdown-1" ...

javascriptjquerydrop-down-menuselectize.js

Customizing SharePoint Web Part Styles with CSS: Header Alignment Issue with Body_TEXT

I am currently working on branding a SharePoint website and have encountered an issue with aligning background colors for the title area and body of some web parts. Despite applying background colors, the alignment between the title and body areas is off ( ...

csssharepointweb-partsbranding

Animating splitting elements with VueJS

I am facing a challenge in creating a split animation with two icons. My goal is to split the icons with some translation in the X-axis after hovering on the container, but it seems like I am missing something in my implementation. The animation does not w ...

cssvue.js

Troubles with Sizing in Twitter Bootstrap Modal

One issue I have encountered with my application is the varying widths of modals. Setting the width inline works well, but when the window is compressed it can cause part of the modal to be off screen, rendering it useless at smaller resolutions such as th ...

csstwitter-bootstrapmodal-dialog

The android webview is having trouble loading HTML that includes javascript

I have been attempting to showcase a webpage containing HTML and JavaScript in an android webview using the code below. Unfortunately, it doesn't seem to be functioning properly. Can someone provide assistance? Here is the code snippet: public class ...

javascriptandroidhtmlandroid-webview

How to target only the parent div that was clicked using jQuery, excluding any

I have attempted to solve this issue multiple times, trying everything I could find on Google and stack overflow without success. At times I am getting the span element and other times the div - what could be causing this inconsistency? $(".bind-key"). ...

javascripthtmljquery

Tips for identifying the amount of <ul> elements contained within every div

Dealing with a large file structured in the same way, I am looking for a method to isolate a specific div, determine the number of ul's within it, and then iterate through each one to extract the value of every li element. <div class="experiment ...

javascriptjquery

Conceal the frontview-specific attribute if the custom attribute value is empty

One of my recent projects involved creating a custom attribute value to display an external link on the product view. I used a custom attribute as a button that connected to my public marketplace store, such as Lazada. However, I encountered an issue when ...

phphtmlmagentoattributesmagento-1.9

generate a series of nested divs within one another

I am looking to create a custom nested loop that will generate div elements based on the content of my h1 and h2/h3 tags. I understand this may have been covered in other inquiries, so any guidance would be appreciated :) Here is the initial HTML: <h1& ...

javascriptjquery

Programme for Server Login

After creating my own server, I attempted to implement a login feature to restrict access to its files. Unfortunately, using Javascript for this task proved to be insecure as usernames and passwords could easily be viewed in the source code: <form name ...

javascripthtmlauthenticationserver

Utilizing pure JavaScript to dynamically fetch HTML and JavaScript content via AJAX, unfortunately, results in the JavaScript

I am trying to load an HTML file using AJAX and then execute a script. Here is the content of the HTML file I want to load: <div class="panel panel-body"> <h4>Personal Data</h4> <hr /> <span data-bind="editable: firs ...

javascripthtmlajaxknockout.js

Problem involving non-breaking spaces

After changing the font-family of my website from Gotham Pro to Gotham, I encountered an issue with the styling of numbers that were formatted using my currency formatter function. Strangely, when the &nbsp character is removed, everything appears to b ...

javascripthtmlcssreactjs