Corporate resizing

• 

  bcsite2017 · Member · Jul 27, 2017 at 11:22 am

  • Copy link
  • Add topic to favorites

  Hello! I am having some issues with resizing the browser with the corporate theme. I’m pretty happy with the website on my normal laptop screen but once I resize or look on a larger screen I start seeing things I must have messed up. Thanks in advance for your help!

  1) The logo on the left doesn’t seem to move relative to the left margin like the branding text on the right. It ends up quite a bit more to the right on larger monitors. Is there a way I can always make there be about 1/2″ margin? I assume I’ve also done something to cause the logo and branding to not quite center when the browser is resized to the point they are vertically on top of each other?

  2) Is it possible to make the background image adjust to the size of the browser? When I resize way down only part of the background image shows. I would like the image to automatically adjust and still show.

  3) The page header text that I have showing in a semi-transparent banner isn’t adjusting well to resizing either. I would like the banner to remain at the bottom of the image and the text to remain inside the banner and adjust on resize. Possible?

  Thank you!

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

• 

  staff-zinnia · Staff · Jul 27, 2017 at 12:35 pm

  • Copy link

  Good morning –

  I want to confirm that you’re working on bloombergconsulting.wordpress.com?

  The theme should adjust for the screen size automatically. What size laptop screen are you viewing the site on? What size is the larger screen?

  If you could capture a screen shot of the site loaded on each of these screens that’d be helpful. Here are the instructions to do that: https://en.support.wordpress.com/make-a-screenshot/

  Let me know once you’ve added those to the site’s media library and I’ll take a look.

  There’s a designated forum for the Corporate theme that you can browse and post to also: https://premium-themes.forums.wordpress.com/forum/corporate

  With your business plan upgrade you have priority access to live chat support too. To access live chat support you’ll go to wordpress.com/help/contact/ and initiate a chat.

• 

  bcsite2017 · Member · Jul 27, 2017 at 6:18 pm

  • Copy link

  Yes that is the correct website.

  I’ve uploaded a few screenshots here:
  XL Monitor:
  https://bloombergconsulting.files.wordpress.com/2017/07/monitor1920x1080.jpg

  Large Laptop Screen:
  https://bloombergconsulting.files.wordpress.com/2017/07/laptopmonitor1920x11080.jpg

  Regular Laptop Screen:
  https://bloombergconsulting.files.wordpress.com/2017/07/laptop-1920-x-1080.png

  I posted these same questions in the Corporate Forum 2 days ago and haven’t heard anything back yet. I’d also emailed support previously and they said since customized with css that they weren’t able to provide any support.

  Since I posted I think I have corrected #2 and the second question in #1, so any help you could provide would be awesome! Thank you!

• 

  thesacredpath · Member · Jul 28, 2017 at 5:39 am

  • Copy link

  Hi there, for the alignment issues in the header, add this to the very bottom of your custom CSS. I’ve looked at your site at various screen widths down to 800px, where everything centers and the menu changes to the touch device menu and made a few adjustments to keep the spacing on the left and right equal all the way down to 800px.

  @media screen and (min-width: 800px) {
    .site-branding .grid {
      max-width: 100%;
      margin-left: 50px;
    }
    #site-top-content .grid {
      float: right;
      margin-right: 40px
    }
  }

  On centering the touch menu icon at 799px and narrower, add the following to your custom CSS below the above.

  @media screen and (max-width: 799px) {
    .main-navigation-wrapper {
      padding-left: 0;
    }
  }

  The reason for the misalignment is this rule in your custom CSS that you have used to try and center your menu.

  .main-navigation-wrapper {
   padding-left:100px
  }

  Remove that and replace it with this to center your menu at 800px and wider.

  @media screen and (min-width: 800px) {
    .menu-primary-container {
      text-align: center;
    }
  }

• 

  thesacredpath · Member · Jul 28, 2017 at 5:47 am

  • Copy link

  On #3, add the following to the very bottom of your custom CSS and see what you think.

  @media screen and (max-width: 850px) {
    #page-header h1 {
      font-size: 2.5em;
    }
  }
  @media screen and (max-width: 800px) {
    #page-header {
      margin-top: 20%;
    }
  }

• 

  bcsite2017 · Member · Jul 31, 2017 at 3:10 pm

  • Copy link

  Worked perfectly!! Thank so much!!

• 

  thesacredpath · Member · Jul 31, 2017 at 8:01 pm

  • Copy link

  You are welcome.