Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS centring problem

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #202575
    cssnewbie29
    Participant

    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

    #202576
    Paulie_D
    Member

    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/

    #202577
    cssnewbie29
    Participant

    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.

    #202578
    Paulie_D
    Member

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

    #202580
    cssnewbie29
    Participant

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

    #202582
    Paulie_D
    Member

    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

    #202584
    cssnewbie29
    Participant

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

    Style.liquid file :

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

    Is this enough?

    #202585
    Paulie_D
    Member

    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. :)

    #202587
    cssnewbie29
    Participant

    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

    #202588
    Paulie_D
    Member

    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?

Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘CSS’ is closed to new topics and replies.