A few formatting questions

Support
#1

Hi support team,

I am relatively new to making changes to the theme X by myself and have a few basic questions.

I am working on the staging of my live site version. The staging site is accessible here: http://leliangirard.staging.wpengine.com/

Questions:

  1. Header of the site: how do I make it go from side to side of the screen? Currently there seems to be some white space on each side.
  2. Background picture of the HERO: what formatting code can I apply so that the picture is responsive to different screen sizes and browser zoom?
  3. On the features section, how do I get the ‘find out more’ button to be centered within the row it is contained in? Similar to the button in the HERO (I didn’t do it myself so I’m not sure how it was done the first time around
  4. The logo section looks fine on a PC/laptop screen. However, on mobile and other smaller screen sizes, they are all over the place. How do I get them centered? Also, what is the best way to adjust the picture so they all look roughly the same size?

That’s it for now, thank you.

#2

Hello There,

Thanks for writing in!

1.) Your navbar is not fullwidth because you have added a custom css code that sets the width of the navbar. Please have it updated and use this instead:

.x-navbar {
    width: 100%;
    margin: 0 auto;
    border-radius: 0;
}

2.) There is none because that’s how the background images works. With Background image you can hardly achieve a total responsiveness without compromises. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

We use the background-image: cover; which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.

Yes we can use background-size: 100% 100%; which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.

Yes we can also use background-size: 100% auto but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.

Or we can also use background-size: contain; but then this is not a good choice because you will see white spaces around your image.

3.) Please click the column and find the Formatting. You may select center to make sure that all the contents of the column will be aligned to the center.

4.) In smaller screens, your header will look like this:

And on the ipad usually the screen size is around 1024, it will look like this:

To resolve this, we will adjust the width of your logo image in specific screen sizes to accommodate the menu items. please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(min-width:980px)and (max-width: 1100px){
    .x-brand img {
        max-width: 120px;
        margin-top: 20px;
    }
}

And since you have installed AP Autoptimize plugin, you must clear the cache and regenerate the js/css files before your test your site.

Hope this helps. Please let us know how it goes.

#3

Thank you. Another small follow up, in the header, the log in and sign up buttons are lower than the other menu items. How do I adjust for that?

#4

Hello @leliangirard,

Thanks for updating thread. :slight_smile:

You can add following CSS under X > Theme Options > CSS:

li#menu-item-298 a, li#menu-item-268 a {
    padding-top: 40px;
}

Thanks.

#5

Thanks that’s great.

I have moved on to other ventures and made the following page. http://leliangirard.staging.wpengine.com/landing-page-learn-more/

The color for the header and footer should be rgb 0,66,105. However 1) once I save, the color code changes slightly to something else (to rgb(0, 68, 107) specifically) 2) the color seems different between the header and footer even though it is supposed to be the same.

Thanks

#6

Hi There,

I can see header and footer background color are same.

The RGB code and this color are are same! Can you please confirm how you are entering the color ?

THanks

#7

I make the edits in Cornerstone directly.See below - everytime I enter (rgb 0,66,105) and save, the next time I open the background setting it shows rgb (0,68,107)

Same thing for the header. I am not sure what the inspector says but I’ve asked different people to look at the page and just looking at it it’s very clear that the blue of the header is darker than the blue of the footer and they don’t appear to be the same color.

In fact, my feeling is that the footer color shows as rgb (0,68,107) and the header shows as rgb (0,66,105), despite both showing as rgb (0,68,107) in Cornerstone. looks like a bug? Both should be rgb (0,66,105) and show as such in Cornerstone.

#8

Hi There,

I tried to replicate your issue on my end but I was not able to, all rgb (0,66,105) that I set as section background, navbar, logobar, topbar, footer background has rendered as is.

And this is the background color that I am seeing on your site.


There seems to be a discrepancy here, are you sure you’re inputing the color code as rgb (0,66,105) and not as (rgb 0,66,105) as how you wrote it above?

Another thing, I see that you’re using an optimizer/caching plugin, would you mind CLEARING and DEACTIVATING those plugins for a while. Then re-set your background-colors.

Thanks,

#9

Thank you. So I did clear the plugin and deactivated it, and it has fixed the bug in Cornerstone and the color code saves the way I enter it.

#10

Hi There,

You’re welcome, yup it was the optimizer caching that was giving the incorrect colors. You can reactivate it now to re-generate a new caching.

Cheers!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.