Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 9, 2014 at 8:05 pm #262560
    axiomnews

    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 10 years, 7 months ago by axiomnews.
    May 10, 2014 at 3:15 am #262691
    Ismael

    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

    May 11, 2014 at 8:39 pm #262951
    axiomnews

    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

    May 12, 2014 at 7:58 pm #263493
    axiomnews

    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

    May 12, 2014 at 10:55 pm #263638
    Yigit

    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

    May 14, 2014 at 5:26 am #264475
    axiomnews

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

  • Author
    Posts
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.