Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #262560

    I’m struggling with something that surely must have a solution, or multiple solutions in Enfold. I am open to any page structure and approach that resolves it.

    I am rebuilding a client’s site that has a fixed-width image to the left of the main content of many pages — a photo above a quotation. Here are two examples from the old site:

    http://omniway.ca/careers_why.php
    http://omniway.ca/who_way.php

    The quotation below the image becomes unreadable when the image is scaled responsively. (I have learned that sidebars in Enfold must scale responsively, so a sidebar is not going to work… Here is an example of how this fails at narrower widths: http://omniway.ca/site/careers/why-omni/ )

    An added factor is that the photo is replaced on some pages by a submenu of pages at the same level of the site structure, as seen here (and the quotation still appears):

    http://omniway.ca/way_program1.php
    http://omniway.ca/long_expect.php?pid=1

    How can I achieve this effect?

    • This topic was modified 9 years, 10 months ago by axiomnews.
    #262691

    Hi Ben!

    Thank you for using the theme!

    What you can do is to create a page then insert 2/5 and 3/5 or 1/5 and 4/5 depend on how wide you want to the grid to be. Add the content on the larger portion of the page then we’ll set the image as background image on the smaller column. We’ll help you with the css once you set up the page. Please provide us with the image URL.

    Best regards,
    Ismael

    #262951

    Ismael (and Yigit) — does the approach proposed by Yigit in this thread work? It seems better if it will.

    https://kriesi.at/support/topic/sidebar-size-4/#post-262345

    Can I define the min-width of .nine.units using media-queries, and have the sidebar occupy the remaining space?

    @media only screen and (min-width: 1340px) {
    .responsive_large .container .nine.units {
    width: 830px;
    }}
    @media only screen and (min-width: 1140px) {
    .responsive .container .nine.units {
    width: 720px;
    }}
    .container .nine.units {
    width: 630px;
    }

    If the answer is “yes” (and I hope it is) — I will need an example of how to do one more thing: disable display of the sidebar at the screen size where it no longer works, and have the main content area become full-width.

    Thanks

    #263493

    IMPORTANT — a reply to my last question would be greatly appreciated. Thanks!
    https://kriesi.at/support/topic/fixed-width-image-to-left-of-responsive-width-content/#post-262951

    #263638

    Hi!

    Please add following code to Quick CSS as well and adjust screen width as needed

    @media only screen and (max-width: 990px) {
    #top #main .sidebar { display: none !important; }
    .responsive .container .nine.units { width: 100% !important; border: none!important; }}

    Regards,
    Yigit

    #264475

    Thank you. This answer makes clear how I can solve this kind of problem in future.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Fixed-width image to left of responsive-width content’ is closed to new replies.