Modern Studio Pro – 2 Questions

[jonedwards80]

Hello,

Building a website using Modern Studio Pro & I have 2 small issues. I tried to fix them myself but haven't been able to.

Question 1: I want to resize the logo to 400x400px approx. The header says I can upload a 300x300px logo. I did this and decided I needed a little bigger. I went into inspect the element to do this via CSS and it said the logo was 150x150px! This has confused me a fair bit and I am stuck with this one!

Regardless, I need the logo a little bigger than it currently is displaying (whether this be 150 or 300px)

Question 2: I want to make a 2 column layout on one of the pages (Individual Hire). I followed the instructions on the StudioPress website but it didn't seem to work for me.

Any help on these issues would be great. Thanks 🙂

http://www.enchantedpartyhire.com.au/

[WisdmLabs]

Hello joneards80,

For the logo issue, you need to modify your themes style.css as follows:
find
line 1166
.title-area {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: enter height that you want.
width: enter width that you want.
}
line 1816
.header-image .site-title > a {
width: enter height that you want
max-width: same width you entered above
}
line 1202
.header-image .site-title > a {
background-color: #FFF !important;
background-position: center center !important;
background-size: width height !important;
float: left;
height: height that you want;
width: 100%;
}
When increasing the height and width make sure you do not exceed the size where the logo overlaps the navbar or the navbar shows below the logo.

---

http://wisdmlabs.com/

[Victor Font]

In addition to the CSS changes, you also have to change the image size in functions.php for the upload. Look for the following code around line 46:

//* Add support for custom header
add_theme_support( 'custom-header', array(
	'default-image'   => get_stylesheet_directory_uri() . '/images/logo.png',
	'width'           => 300,
	'height'          => 300,
	'flex-width'      => false,
	'flex-height'     => false,
	'header-selector' => '.site-title a',
	'header-text'     => false,
) );

Change the height and width to the dimensions of your new logo.

As for the 2-column layout, use the Genesis Column classes:

<div class="one-half first">
column 1 content goes here
</div>
<div class="one-half">
column2 content goes here
</div>

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[jonedwards80]

Thanks guys! Great work 🙂

[btmva]

Hi - I followed the instructions above to increase logo/header space size, and all is well on desk top, but when I pull up my site on mobile device, the logo is too large (off centered, and partly cut off). Any suggestions on how to keep the larger logo, but have it display correctly on mobile would be appreciated!

Thank you.

http://terrilowe.com/

[Author]

Posts