CSS centring problem

[cssnewbie29]

Hey guys!!

Congrats for the forum, its always great to have a community that helps out newbies like me!

I have an issue trying to center some content in a page that I am trying to publish.

I have tried everything but can’t seem to get it right. I am using a template and trying to adapt it. So in few words this is what I am trying to do:

http://postimg.org/image/xb3or7t0r/

I am trying to center both the text on top (which in the image is already centred), the image and the text. Here would be my ideal position:

http://postimg.org/image/bnq9f3aef/

Its not a great drawing, but what I am trying to do is pretty much try to shift everything left and have it centred.

I have a style sheet and my index sheet. The code for those sections is:

Index.liquid file : “https://gist.github.com/anonymous/41d22811434b0d727f97”

Style.liquid file :

“https://gist.github.com/anonymous/befe3f96e654e8e3052e”

I have been trying to change padding and the text align, but both the image and the title on top move, and I just need one thing to move at the time.

Could you please give me a hand? I am sure this is something fairly easy to do I am just missing the trick behind it….

Thank you so much!!
Mike

[Paulie_D]

Please make a Codepen Demo rather than dump code.

But you might like to review this first.

https://css-tricks.com/centering-css-complete-guide/

[cssnewbie29]

Hi Paulie, thanks for the help. That is actually the guide I was using, but if I change the text-align then the whole thing moves, same with the padding. In the sense that, if I move the image, the text moves together with it. I can’t make one thing move and the other stay still and viceversa.

[Paulie_D]

If you make a demo we can take a look at the ‘non-working’ code and see what can be done.

[cssnewbie29]

Paulie, when you mean to make a demo, do you mean to post the whole code for both pages in codePen?
Thanks

[Paulie_D]

I mean just enough code (HTML & CSS) to show the problem.

If the HTML (or CSS) isn’t relevant to the issue…leave it out

[cssnewbie29]

Index.liquid file : “https://gist.github.com/anonymous/41d22811434b0d727f97″

Style.liquid file :

“https://gist.github.com/anonymous/befe3f96e654e8e3052e”

Is this enough?

[Paulie_D]

Nope….a demo…not a link to files for us to make a demo.

Help us help you….don’t make us work for it. :)

[cssnewbie29]

Hey Paulie, I understand your frustration now, I am in a similar community and sometimes people just don’t get its easier for whoever is helping if they give us the right tools for us to help… But in this case I really do not know how to do that eheh.
Thing is I have two files that are relevant here, the index.liquid (ruby, but works in the same way as CSS) and the style.css.liquid , no HTML at all. I run all of this on shopify.
I can’t create the demo as I can’t put both files up at the same time on codepen (or at least, I haven’t managed to yet). That’s why I have just put the raw code on github.
any suggestion? thanks again

[Paulie_D]

Not really, If I can’t interact with the code in a live environment then I’m not going to try and parse it out from a wall of code.

Perhaps you have a live link on a dev site we could look at?

[Author]

Posts