Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #836375

    Hi,
    I would like to have a 2 columns page. On the left column I want an image element and on the right column I want a right aligned text element with a small border. The right element must overlap the left element.
    See attached mockup (image) and website url in private content.
    Can you help me out on this?

    THX Freek

    #836780

    Hey Freek,

    Thanks for the screenshot and link, it looks like you have managed to get something which at least resembles your screenshot. What exactly do you need help with?

    Best regards,
    Rikard

    #836846

    Rikard.
    After my support question i managed to add Some custom css code. Now this column has a fixed height and when you resize the screen the image on the left resizes also but Not the text column on the right. Is iT possible with css code for height?

    THX Freek

    #837299

    Hi,

    Ok, so you want the text column to be a fixed height? I’m not sure if that’s such a good idea since the text won’t fit in there if you do that. I think it looks kind of cool when it’s resized actually.

    Best regards,
    Rikard

    #838543

    Yes I pretty much get what I want but now I have one challenge left.
    I use this code for a 3/5-2/5 column setup with picture on the left, text with border on the right:

    .mock1 {  margin-left: -10% !important;
      margin-top: 4%!important;
      width: 48% !important;
      padding-left: 10% !important;
      padding-right:10% !important; }

    The text block on the right is positioned a little over the picture on the left column. Look ok!
    Now I want to achieve the same with a 2/5-3/5 column setup with picture on the right and text with border on the left.
    I use the following code to achieve that but the textbox is behind the picture:

    .mock2 { margin-right: -10% !important;
      margin-top: 4%!important;
      width: 48% !important;
      padding-left: 5% !important;
      padding-right:20% !important; }

    I also use this code to adjust the image column with following code:

    .mock3 {
      margin-right: -5% !important;}

    The URL is : http://tasteoffashion.nl/test/
    Another thing is the right aligning of the complete page. See URL.

    I have 2 questions:
    How can I show the text box with border over the image and how to right align the page.

    THX Freek

    • This reply was modified 7 years, 4 months ago by Freek.
    #838550

    I found the code to get the text over the image:
    z-index:10000 !important;

    THX Freek

    #839053

    Hi,

    Great, glad you got it working. Let us know if you should need any further help on the topic.

    Best regards,
    Rikard

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.