Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • May 21, 2015 at 4:24 pm #447807
    stedia

    I’m in the process to convert my site to Enfold. However, I do have some issues to resolve get a full with logo in place and I would like to use a boxed layout with an background-image.
    Max container with: 1140px
    Content & Sidebar with: 100%

    The first page is like a landing page – created a page without header and just an image and full-sub-menu below.
    See: http://grab.by/HsAq
    – Why is the content container here still full size?
    This is what I would like to achieve: http://grab.by/HsDS

    On the regular pages, I would like to have a logo that is equal with to the boxed layout of 1140px.
    But I’m struggling to get this done – the logo remains very small.

    See this example: http://grab.by/HsDS

    May 22, 2015 at 8:46 am #448232
    Rikard

    Hey stedia!

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Cheers!
    Rikard

    May 22, 2015 at 11:23 am #448307
    stedia

    This is a local development site …. I can provide an export if that works for you?

    May 22, 2015 at 4:57 pm #448463
    Yigit

    Hey!

    Can you please post the link to your website when you launch it or it would be a shot in the dark :)

    Cheers!
    Yigit

    May 24, 2015 at 11:40 am #449237
    stedia

    You can view the pages here:

    Entrance Page: http://stefanbauer.nl/tryout/

    Now I have to remove the white area around the image. I have tried to do that with a custom CSS for the image, but that is not working.
    How can I remove this padding from the “container” as I can not provide a custom css class for this area and I would like to do this only for this page. Using a code-block including the image is also not working. Only via #top .container I’m able to remove the left and right padding. But I would like to remove the top and bottom also and only on the home page.

    For the other pages, I would like to have the logo full width.
    I have resolved this now via: 

    /*Change dimensions of logo era:*/
#top .logo {
	width: 1140px;
	height: 270px;
}

    However – when I change the 1140px to 100% – I do get the white area on the left and the right. Is there an option to make.

    When I use the width: 1140px – I do see that on my iPad the logo is even outside the boxed-area that has been defined.

    So – what is the trick to get the logo equal width to the boxed-area?

    You can watch the page here: http://stefanbauer.nl/tryout/item-a/

    May 25, 2015 at 7:53 am #449406
    Rikard

    Hi!

    Please try the following:

    .main_color div:first-child {
padding: 0px 0px !important;
}

    Cheers!
    Rikard

    • This reply was modified 9 years, 5 months ago by Rikard.
    May 26, 2015 at 9:49 am #449918
    stedia

    Rikard,

    The CSS mods was changing the text in my content container. I have applied the following code:

    /*Change dimensions of logo era:*/
#top .logo {
	width: 100%;
}
#top #header_main div.container {
	padding: 0px 0px!important;
}

    It looks fine – until I resize the window. When I make it smaller, also on my iPad in portrait and landscape mode, I do get an additional white area under my logo.

    In addition there remains a small white area on the right side when I make the window size a bit smaller.

    http://stefanbauer.nl/tryout/item-a/

    May 26, 2015 at 4:22 pm #450155
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 768px) {
#header_main .container {
  width: 100%!important;
  max-width: 100%!important;
}}

    Regards,
    Yigit

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