New to the community? Start here

Improve display on bigger screens (27 inches)

I was wondering if you could help my to fix how a section displays on bigger monitors.
[attachments are only viewable by logged-in members]

I’m using a 27inch monitor and there’s too much empty space left and right, this is more noticeable in the red section.

Is it possible to make is full width even on bigger monitors?

Thanks in advance

Tue, 19 Nov 2019 4:14:46
  • Predrag Dubajic
    • Support

    Hi Leo,

    Can you tell me which resolution you have on your monitor?

    I don’t have 27″ screen but when I check with Chrome dev tools with 50% on 24″ screen I do see the issue with specific sections.
    From what I see the issue is happening with your image sizes, for example, your Request a quote section uses image with 2000px width so if the resolution is higher than that there’s simply not enough image to fill in the space.
    You can try uploading a larger image to handle higher resolutions as well.

    Best regards,
    Predrag

  • Predrag Dubajic
    • Support

    Hi Leo,

    Something like this will get the image holder to full width:

    .wpb_single_image .vc_figure {
	width: 100%;
}

    However, there are two issues with this approach, the section where the image is doesn’t have any unique CSS selectors that could be used so if you apply that code on the entire site it could affect some of your other elements as well.
    If you could apply it only to that specific element, or give that element a unique class or ID then it could be contained not to affect other parts of the site.

    The second issue is the image size itself, the image will be stretched to fit into that content and that will result in a blurry image on larger screens.

    Best regards,
    Predrag

  • Predrag Dubajic
    • Support

    Hi Leo,

    About that gap, when I inspect the page there’s actually an entire element there, it contains the same Facebook image as the right one just above the gap.
    It seems that there’s another element that is not displayed so I would suggest checking the page in page builder and see if there’s an extra element that should be removed, and that should take care of the gap.

    You could try applying CSS to hide it but the thing is that the only unique selector for that element looks like this vc_custom_1574137261749.
    The problem is that page builder elements with big numbers like that are usually dynamically created, which means that the CSS will work at first but when you edit that page and save it the number in that class will change most likely, so the selector used in CSS will no longer be valid and the gap will be back.
    If you wish to give it a try this code should do it:

    .vc_custom_1574137261749 {
    display: none;
}

    For the footer widget, it’s caused by this CSS code used on your site:

    @media only screen and (max-width: 900px) {
	li#nav_menu-4 {
	    left: 0px;
	}
}

    Browser console doesn’t show it as coming from a file so I’m guessing that you have a Custom CSS plugin or perhaps it’s added in Appearance > Customize > Additional CSS field, or somewhere similar.
    When you find where that code is added simply change the max-width value from 900px to 991px (as that’s where the issue starts) and that should do it.

    The part with the triangles is also a tricky one as the height is defined by the text inside and then the background just fills that in, if you can edit that element in page builder and apply below CSS code only to that element it might do the trick:

    @media only screen and (min-width: 1920px) {
	.upb_row_bg.vcpb-default {
		height: 720px;
	}
}

    I’m not sure what do you mean by “can we do something about this text” part, can you elaborate that a bit more?

    And the last gap is again related to image sizes, the white part is header that is not covered by the image, and from the browser console I see that this has specific CSS and structure due to the parallax effect so I’m not sure how could we force the size without messing up parallax effect and zooming in on image by a lot.

    I’m afraid that the changes you need on your site are pretty much falling into the custom development at this point since there are a lot of adjustments needed to get the responsiveness on all screen sizes you are looking for.
    Adding pieces of CSS like we’re doing so far is ok for some smaller fixes but we’re talking about a lot of changes at this point that can affect your site in other ways and can cause you issues down the road when it comes to debugging.
    I would strongly suggest hiring a professional frontend developer with the list of the changes that you need so that they can all be done at once and properly optimized with that as well.

    Best regards,
    Predrag

  • Predrag Dubajic
    • Support

    Hi Leo,

    I’m afraid that I’m not comfortable adding these changes to your site as I’m not sure how the pages were built in the first place and if there’s anything else that I could affect by adding the code.

    For example, the first code I mentioned is for an element that is not visible on front end and I’m not sure what is the use of it being in the page builder, if you start the page builder on About Us page this is the section I’m referring to:
    [attachments are only viewable by logged-in members]

    Then for the footer widget code, there’s an existing custom code on your site that is causing that, as I’m not familiar with the changes you made on your site I’m not sure where to change that and if it needs to be changed in WP admin, files directly, page builder, or somewhere else.

    The triangles part is also tricky because there’s again one element shown in the builder but not on the page and I’m not sure if adding the code could affect something else.
    You can try applying a custom ID to that element and then change the code to reflect that and add it to your custom CSS where other code is added, so you could add the ID by editing the triangle element:
    [attachments are only viewable by logged-in members]
    And then use the code with that ID you set, for example like this:

    @media only screen and (min-width: 1920px) {
	#my-custom-triangle-id {
		height: 720px;
	}
}

    I would suggest having a full backup ready before you try applying the changes because it’s a custom installation and I can’t really know if the changes will affect anything else on your installation.

    And as I mentioned before, these are custom layout changes that could affect your site in different ways so I would suggest hiring a developer to make all the desired changes to the layout.

    Best regards,
    Predrag