Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • June 30, 2015 at 12:35 pm #466347
    sublime5o

    I have a site that is using a full width layout. I am looking to get the borders that are in-between sections not to reach the full width but to reach the maximum width that is specified in the layout settings (under dimensions). What would be the best way to do this?

    Also I am trying to get my entire header background image to be responsive to fit 100% width no matter what size the resolution is. Any thoughts?

    July 1, 2015 at 12:32 pm #466927
    Ismael

    Hey sublime5o!

    Thank you for using Enfold.

    1.) You can set the color section to have a “No border styling”. Use the Seperator / Whitespace to separate the sections.

    2.) Use a larger image or add this in the Quick CSS field:

    .header_color .header_bg {
  background: #ffffff url(//gl.dyndns-ip.com/coles/wp-content/uploads/2015/06/headerback.jpg) top center no-repeat scroll;
  background-size: cover;
}

    Best regards,
    Ismael

    July 1, 2015 at 2:17 pm #466979
    sublime5o

    Thanks! The first solution is perfect. For the header image, I added the CSS above (and removed the logo area background) and it still is not responsive.

    July 3, 2015 at 10:42 am #467896
    Andy

    Hey!

    it is responsive and you just need to define how you want the responsiveness to behave. I think Ismael’s solution is the best solution, but if you really want your header image to be 100% (width and height) all the time, then replace the code with this one:

    .header_color .header_bg {
  background: #ffffff url(//gl.dyndns-ip.com/coles/wp-content/uploads/2015/06/headerback.jpg) top center no-repeat scroll;
  background-size: 100% 100%;
}

    Regards,
    Andy

    July 10, 2015 at 1:35 pm #471428
    sublime5o

    That seemed to have worked for certain browser sizes but not for others. It gets distorted if it is too small or too large (width). See the links in the private content area for screenshots.

    July 13, 2015 at 9:55 am #472203
    Andy

    Hey!

    that’s why I told you that Ismael’s solution is best :).

    However, if you have more control over it, then you would need to work with media queries. For mobile device you could use something like this:

    @media only screen and (max-width: 736px) {
.header_color .header_bg {
  background: #ffffff url(//gl.dyndns-ip.com/coles/wp-content/uploads/2015/06/headerback.jpg) top center no-repeat scroll;
  background-size: 100% 100%;
}}

    For a table something like this:

    @media only screen and (max-width: 1024px) {
.header_color .header_bg {
  background: #ffffff url(//gl.dyndns-ip.com/coles/wp-content/uploads/2015/06/headerback.jpg) top center no-repeat scroll;
  background-size: 100% 100%;
}}

    Adjust it as needed.

    Cheers!
    Andy

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