Need to place the logo close to the text in the jombotron section

Hello,
I have been asked to move the logo close to the text in the jombotron section. (see attached pic as an example)
Any chance to do that?

Thanks,
Umberto

Hi Umberto

Please provide a link to the page :slight_smile:

here it is:
http://tobethat.net/

It would also be useful to be able to move the text “TOBETHAT” along with the logo within the sky area…

Thanks a ton!

Kind regards,
Umberto

HI Umberto

Ok, now I understand your question, this is what you can do for now,

  1. you can manually remove center text instead of CSS code,
  2. Logo - you can use img tag with your image to place the logo in the middle,

No customization is needed to make changes in this case

Hello,
Thanks for your reply.
Well but the img tag does not let me specifiy the position right?
How can I tell to be at the center of the image?

Uhpdate:
I made some tests and actually I have managed to replace the former text with an image.
The code I used (in the text box of the logo):


<h1></h1>

However now I have few problems.
1] The image/text I added is no longer responsive…
2] I should move up the the container of the image as it is too low (probably because I have an image now instead of a text).
the class container is class=“col-sm-12”
I have tried to raise this up but no way…
3] The size of the logo is too big. I would like to reduce it but I cannot work out how, Using width and height in the image tag does not seem to work out well.
I also tried in the css with a code like this: (but the it is no longer centred)

img.col-sm-12 {
width: 50%;
background-color: powderblue;
}

THanks,
Umberto

Hi Umberto,

Nor recommended to use col-sm-12 CSS class for this image, try to create a custom class and then we will be able to style it, just use any custom class and I will help you with CSS

Many thanks for your precious help.
All right then,
I have created in the CSS the custom class called as follows:
lettering { }

now I am not sure how to stick into the existing col-sm-12 or what to do next in order to be able to put the image at the very center of the image as previously explained.
I have created a temporary login for you in order to do whatever you recommed to reach the goal…
http://tobethat.net/wp-admin/?wtlwp_token=a016083ac983ba65ac7c81962c14d2eb

Thanks!
Umberto

Hi Umberto :slight_smile:

Apologies on the delay

This is what I did, I added your class and then this CSS:

img.lettering.aligncenter {
width: 20%;
height: auto;
}

Also, I selected this image as a center alignment (click on the image)

Many thanks Noda!
That works beatifully!!!
I also have another question: is there any chance to shift the text upper? It is not actually centered compared to the background image. Even in the mobile version.

I am thinking at the following option:

margin: 0 0 150px 0; instead of     margin: 0 0 29px 0;

in the
#header .bottom-header h1 {
margin: 0 0 70px 0;
etc…

Howdy Umberto :slight_smile:

Yes, you can use this code to shift text and logo up:

#header .bottom-header {
padding-top: 140px;
}

And this code to center text:

#header .bottom-header .col-sm-8.col-sm-offset-2 {
margin-left: auto;
width: 100%;
}