Resize Header Image/ Logo

• 

  abbyjeffers · Member · Aug 6, 2016 at 11:35 pm

  • Copy link
  • Add topic to favorites

  My Genisis child theme ‘Flourish’ recommends my logo be sized 1000 x 300, but I do not like how small it looks above the menu/slider. I figured out how to make it larger by manipulating the code and resizing my image, but it messed up the entire layout on mobile, so I changed it back. Any insights would be great!

  Also, I downloaded the plugin Google Fonts to override my theme defaults, but it won’t change the links! What code could I put in the CSS customizer to add on?

  Thank you so much for your help!

  thesunshinewithin.com

  The blog I need help with is: (visible only to logged in users)

• 

  livfor2day · Staff · Aug 7, 2016 at 6:12 pm

  • Copy link

  Hi, there.

  Genesis themes are designed with a section at the bottom of the CSS called labeled Media Queries. There is an “@media” tag for each mobile screen type. These are usually coded with respect to the main parameters for the desktop browsers. Once you modify the CSS to adjust the settings in the computer browsers, you’ll need to make changes to the applicable @media sections to ensure that everything shows up properly on the various-sized mobile devices. You can use the site https://www.browserstack.com/ to get an idea as to what your site looks like on most browsers and most devices.

  As for the Google Fonts plug-in, I’m a big believer in not using plug-ins unless the coding involved is more complicated than one is capable of doing independently, as the more plug-ins you have, the more likely you are to have difficulties with your site performance. If I were you, I’d use the Custom CSS (assuming you have Jetpack installed) to modify the fonts directly. In your case, you can use the code

  body {
  	font-family: "******", serif;
  }

  (where ****** is the font you’d like) to change the fonts in your entire site. If you’d like to use a specific font for a particular element (i.e. your nav bar at the top), you can include that specifically. Like this:

  .nav-secondary .genesis-nav-menu .menu-item a {
        font-family: "*******", serif;
  }

  Be sure to use fonts that are web-safe, which means that they come included with all browsers. If you’d like to use a different font, you’ll have to include some code to load that when your site loads.

  Finally, your site is considered self-hosted, which means that it is not part of the WordPress.com universe. The forums over at WordPress.org are a better place for you to post your questions. The forums here are intended more for the folks hosting their website at WordPress.com. If you want to better understand the difference, check out this page.

  Good luck!