[byronic1@att.netParticipant]

(please see attached images)
url: byronk.com/leeins
I can send login info if you want.
I need to adjust the space below the logo in header and reduce the space around the images and text in yellow bar.

There doesn’t seem to be any padding that I can see.

Thanks in advance

Byron Kawaichi

[ChristopherModerator]

Hi there,

Please add the following code in Customize -> Custom -> CSS :

.x-navbar {
    padding-bottom: 26px;
}
a.x-img, .x-img {
    margin-bottom: 0;
}

Please add width: 100%; in images style field.

In regards with small images, add inline css style="float:left;" to <img> tag.

e.g :

<img class="x-img x-img-none" src="http://byronk.com/leeins/wp-content/uploads/2015/12/home.jpg" style="float: left;">

Please add text-align: justify; in text element style field.

Hope it helps.

[byronic1@att.netParticipant]

The logo spacing solution worked great.Thank you.
I couldn’t figure out how to access the image tag since it doesn’t seem possible to see the actual code. I tried pasting it in the Class blank box but nothing good happened. The image shrank to nothing.

Can you also tell me how to reduce the depth of the yellow band at the bottom of the first image I sent you? I need to make it partially visible above the fold.

And-where would I go to adjust the leading in my main text?

Byron Kawaichi

[byronic1@att.netParticipant]

Another query: I wanted to know how to put the small images of the office with balloons, the medical symbol and the home lined up on the left with the text running around them. (The three columns that read: Business Insurance, etc.)

Thanks again!

[LelyModerator]

Hello Byron,

You may add those on Style field like below:
float:left; or this width: 100%; will work on style field.

Can you please clarify what you meant by reduce the depth of the yellow band at the bottom of the first image. Please give screenshot on what exactly you want to happen. And when you say leading for your text, are you referring to margins or padding or space on where?

What kind of balloons are you referring to?
We’re sorry to answer back with a question. Unfortunately, we’re speaking a different language, and it is not clear what you meant and what you want to achieve so we can’t give you suggestions right now. Rest assured that we will help you once we have a clear understanding of each query and how it is supposed to look.

Always,
X

[byronic1@att.netParticipant]

OK. Sorry to be unclear I have made screenshots of the site I am trying to duplicate (with boxes and arrows) and the in-progress x theme site I am working on. I hope this is more clear.
Here is a recap of what I need to do:
1-Make a background that echoes the pattern of black and white of the home page (white background with black box at the tope). I have tried to use the existing .png from the existing site, but it does not match. The background has to stay in place at the top of the page.

2-I need to reduce the spacing around the 3 images in the tan box. The goal is to match the original page so that some of the tan box is above the fold.

3-To further that goal of closing up spacing on the page, I need to find out how to reduce white spaces between sections and above the footer.

4-In the section with tiny illustrations (Home, Store with balloons, and caduceus) I want to place those illustrations on the left with the text on the right, like the original site.

In general, I don’t understand how to adjust space on the page. I have set the padding to zero, but can’t think of another solution. Thank you for your help on this.

[byronic1@att.netParticipant]

Here’s the screenshot of the site as it appears in x-theme.

[FriechModerator]

Hi Byron,

1) Unfortunately, that would be a little tricky because of the boxed layout of your site. Maybe a background pattern will do, would you mind providing us the original site URL so we can take a look on what approach they have on that background?

2) We can reduce the spaces of the images on that section, but making that section always visible above fold will not always be the case. What I mean is, right now if you view your page on a big screen/resolution that tan section would be visible above the fold, but if you have a standard screen/resolution it would not be visible so it is really depend on the viewer’s screen. However, we can condense that first section (personalized service is our speciality) so that tan section would be pushed above the fold a little bit. You can do that by setting the top and below padding of that first section to 0 on Cornerstone or you can add this custom css

.page-id-7 #x-section-1 {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

Regarding the images spacing; On the original site it seems that the images and text are align left, but on your development site it has a center-text class, so you might want to look for those class on the second section and change those to left-text class. After that you can add this custom css

.page-id-7 #x-section-2 a.x-img>img {margin-left: 0;}
.page-id-7 #x-section-2 .x-container {width: 95%;}
.page-id-7 #x-section-2 .x-container .x-text p {margin-bottom: 0;}

3) You can adjust the sections padding (top and bottom) to move the sections closer, by default sections has 45px top and bottom padding, that is causing the gap. For the footer you can use this CSS:

footer.x-colophon.bottom {
    padding-bottom: 0;
    padding-top: 0;
}

4) Add this css on the images element STYLE field.

float: left

And then this on the text element STYLE field.

text-align: left;float: right;width: 70%;

Hope it helps, Cheers!

[byronic1@att.netParticipant]

Thanks very much! I didn’t realize that I had to check each section’s padding. That helped a lot. The CSS for the footer did not seem to work, though. Any ideas on that?

The url for the original website is: leeins.com

It’s great to have your help.

[DarshanaModerator]

Hi there,

With regard to the footer issue, please disable Footer Widget Areas by head over to Appearance -> Customize -> Footer -> Footer Widget Areas section.

Hope that helps.

[Author]

Posts