How to fix my logo size?

Dazzling
1

Hi!

I’m using Dazzling theme and I must say it’s fantastic! But I’ve come across a problem I can’t seem to solve. Firstly my site’s main logo was blurry on mobile version. Then I searched on this forum and found a custom plugin that solved it but added another problem.

The code:

<?php 
/*
Plugin Name: Colorlib Plugin
Description: Quick Custom Solution Plugin for Implementing Custom Solution.
Version: 1.0.0
Author: Movin
Author URI: http://freewptp.com/
License: GNU General Public License (Version 2 - GPLv2)
*/

function custom_dazzling_custom_header_args( $args ) {
	$args['width'] = 9999;
        $args['height'] = 9999;
	return $args;
}
add_filter( 'dazzling_custom_header_args', 'custom_dazzling_custom_header_args' );

The problem with cropped logos on mobile versions was solved but now I wanted to force a much larger image(3000x660) to show on a 300x66 space. Can I do that just by using CSS codes? Thanks in advance.

2

Hi @mosufe,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Dazzling Options -> Other -> Custom CSS

#logo img {
    max-width: 300px;
}

Best Regards,
Movin

3

Thank you for your response!

I did try the code you suggested but it seemed to have no effect at all. Maybe is there anything I’m missing?

Here is the link of my website: http://cpejr.com.br/2016_TI21/

Thank you in advance.

4

I visited your shared site and found the provided CSS code is not working because of the following incorrect custom CSS code you are using on your site.

@media (max-width: 769px) {
	#secondary.widget-area.col-sm-12.col-md-4 {
    		margin-top: 1150px;
		@media (min-width: 500px) {
			#secondary.widget-area.col-sm-12.col-md-4 {
    			margin-top:            1400px;
		}
 	}
}

You can correct the above CSS code by changing it as following or to make our provided CSS code work on your site just add it at the starting of custom CSS code.

@media (max-width: 769px) {
	#secondary.widget-area.col-sm-12.col-md-4 {
    		margin-top: 1150px;
        }
}
@media (min-width: 500px) {
			#secondary.widget-area.col-sm-12.col-md-4 {
    			margin-top:            1400px;
		}
 	}
5

Thank you!

It worked like a charm.
That CSS code was me poorly trying to define a range interval using @media.

Anyways. My site seems to be going 100% right now.

6

You are most welcome here :slight_smile: