Force full width of element using CSS

On each of my page banners I have set up a small text element that I have placed some shading via CSS to make the text a bit easier to read.

I would like to force this shading outside of the element's borders so that it is forced to go full width just as the background images and other shaded elements are in the region background

  • Michael Bissett

    Hey @Brett, hope you're doing well this evening! :slight_smile:

    We can try to do this by inserting the following into:

    Theme Settings -> add custom css rules

    div#text-object-1430289985692-1671,
    div#object-1432539355983-1372,
    div#text-object-1432676143693-1610,
    div#object-1430289179261-1483 {
        margin-left: -25%;
        width: 148.25% !important;
        max-width: 150% !important;
    }
    
    div#text-object-1430289985692-1671 > h1,
    div#object-1432539355983-1372 > h1,
    div#text-object-1432676143693-1610 > h1,
    div#object-1430289179261-1483 > h1 {
        width: 70%;
        margin: 0 auto;
    }
    
    .upfront-output-layout.default.upfront-image-lazy.upfront-image-lazy-bg {
        overflow-x: hidden;
    }

    Could you try that, and let me know if it helps please? :slight_smile:

    Kind Regards,
    Michael

  • Brett

    Hey Michael,

    Thanks for speedy response... It looks like it is almost right buuuuut it doesn't go all the way. I am on a 21inch iMac and as I expand the browser out full screen it is still not 100%

    is is just a matter of increasing these measurements?

    margin-left: -25%;
    width: 148.25% !important;
    max-width: 150% !important;

    Also, I have this set up on each individual page (sometimes several instances on each page). How do I go about getting the right element id? The ones that I have found are all text-objects but some in your css were just normal objects.. Why would there be a difference?

    #text-object-1431995655098-1882
    #text-object-1432624882113-1069
    #text-object-1430445976329-1330

  • Michael Bissett

    Hey @Brett,

    It looks like it is almost right buuuuut it doesn't go all the way. I am on a 21inch iMac and as I expand the browser out full screen it is still not 100%

    is is just a matter of increasing these measurements?

    margin-left: -25%;
    width: 148.25% !important;
    max-width: 150% !important;

    Try using these instead:

    div#text-object-1430289985692-1671, div#object-1432539355983-1372, div#text-object-1432676143693-1610, div#object-1430289179261-1483 {
    margin-left: -48%;
    width: 196% !important;
    max-width: 200% !important;
    }
    
    div#text-object-1430289985692-1671 > h1, div#object-1432539355983-1372 > h1, div#text-object-1432676143693-1610 > h1, div#object-1430289179261-1483 > h1 {
    width: 54%;
    margin: 0 auto;
    }

    Also, I have this set up on each individual page (sometimes several instances on each page). How do I go about getting the right element id?

    You can use Google Chrome's Developer Tools to help get that, we've got an article on the use of that over here:

    https://premium.wpmudev.org/blog/chrome-developer-tools/

    I've attached a screenshot here that focuses on your first text element with this sort of shading, to help illustrate how you would find the ID of the element to target. :slight_smile:

    The ones that I have found are all text-objects but some in your css were just normal objects.. Why would there be a difference?

    Hmm... that's a good question. Going through the list, they do seem to alternate from having "text-object" in the name to having just "object". Not that it'll cause a meltdown, mind you, but it is interesting. :slight_smile:

    Kind Regards,
    Michael

  • Brett

    Hey Michael,

    Thanks for the comprehensive response... this is why I love being a member with you guys. Speedy and very helpful advice / support. Seriously, it's A+

    I thought the width issue would just be a matter of increasing them a little. As I am always looking for the logic behind the solution, can you tell me how you work the dimensions out for different screen sizes? I'm sure there's a handy reference somewhere that you consult :slight_smile:

    Thanks also for pointing out the it is the element ID that is being used.. Sometimes with all the classes and IDs in the Upfront system it can get a little confusing which one but good to know how I can sort this out. Weird that the IDs change sometimes for the exact same element type.

    Thanks again mate, you guys are legends.

    Cheers... brett

  • Predrag Dubajic

    Hey @Brett,

    Mind if I jump in until Michael gets online :slight_smile:

    I thought the width issue would just be a matter of increasing them a little. As I am always looking for the logic behind the solution, can you tell me how you work the dimensions out for different screen sizes? I'm sure there's a handy reference somewhere that you consult :slight_smile:

    Chrome inspector tool is an awesome thing that can do wonders :slight_smile:
    For example you can switch to responsive mode which will display smaller screen and you can select different device sizes or drag it yourself to change to custom size, and all elements are still displayed so you can see which CSS changes are required for which screen size.

    Thanks also for pointing out the it is the element ID that is being used.. Sometimes with all the classes and IDs in the Upfront system it can get a little confusing which one but good to know how I can sort this out. Weird that the IDs change sometimes for the exact same element type.

    ID's are actually always different because you are not allowed to have two or more same ID's on one page.
    Classes can be repeated but ID's no, that this why you are seeing different ID for same elements.

    Hope this clears things up a bit :slight_smile:

    Best regards,
    Predrag

  • Brett

    Thanks guys for your great help with this one... I have successfully set this up for all banner panels on the site and it looks perfect.

    buuuuuuut... (there's always a but!) it seems that forcing this set up has some implications down at a mobile level. When I test the homepage on an iPhone 6 it features a large white strip down the RHS, which I guess is from us forcing the width to be 196%.

    How do I tell the CSS to not apply this full width styling on mobile devices? Do I just set the media queries for each breakpoint and then set all of the elements back to a normal 100% width? When I go into inspector as you both suggest and fiddle with the element parameters and take them back to 100%

    so for iPhone 6 it would look something like this?

    @media only screen
    and (min-device-width: 375px)
    and (max-device-width: 667px)
    and (-webkit-min-device-pixel-ratio: 2) {

    div#text-object-1430289985692-1671, div#object-1432539355983-1372, div#text-object-1432676143693-1610, div#object-1430289179261-1483, div#text-object-1432786210764-1898, div#object-1432786524877-1587, div#object-1432786537545-1753, div#object-1432786544598-1825, div#text-object-1432788319247-1493, div#text-object-1432788467536-1754, div#text-object-1432788628375-1754, div#text-object-1432789587715-1578, div#text-object-1432789620205-1607, div#text-object-1432790031112-1528, div#text-object-1432790256084-1802, div#text-object-1432852627111-1292, div#text-object-1432852783357-1197, div#text-object-1432853089976-1164, div#text-object-1432853305556-1499, div#text-object-1432853721958-1975, div#text-object-1432853858886-1611, div#text-object-1432854083454-1497, div#text-object-1432854483924-1452, div#text-object-1432854665021-1943, div#text-object-1432854940907-1047, div#text-object-1433135482133-1059, div#text-object-1432855183502-1546, div#text-object-1432855500758-1927 {
    margin-left: -25px
    width: 196% !important
    max-width: 115% !important
    }
    }

    And where do I put this mobile specific CSS?

    In the theme CSS section or do I create mobile specific CSS in the responsive editor? and then do different CSS for each breakpoint?

    I look fwd to hearing back from you

  • Michael Bissett

    Hey @Brett,

    Actually, if you're wanting to have it only apply to screens larger than 668px, you could just have it like this:

    @media only screen and (min-width: 668px) {
    div#text-object-1430289985692-1671, div#object-1432539355983-1372, div#text-object-1432676143693-1610, div#object-1430289179261-1483, div#text-object-1432786210764-1898, div#object-1432786524877-1587, div#object-1432786537545-1753, div#object-1432786544598-1825, div#text-object-1432788319247-1493, div#text-object-1432788467536-1754, div#text-object-1432788628375-1754, div#text-object-1432789587715-1578, div#text-object-1432789620205-1607, div#text-object-1432790031112-1528, div#text-object-1432790256084-1802, div#text-object-1432852627111-1292, div#text-object-1432852783357-1197, div#text-object-1432853089976-1164, div#text-object-1432853305556-1499, div#text-object-1432853721958-1975, div#text-object-1432853858886-1611, div#text-object-1432854083454-1497, div#text-object-1432854483924-1452, div#text-object-1432854665021-1943, div#text-object-1432854940907-1047, div#text-object-1433135482133-1059, div#text-object-1432855183502-1546, div#text-object-1432855500758-1927 {
    		margin-left: -25px;
    		width: 196% !important;
    		max-width: 115% !important;
    	}
    }

    I'd want to insert it in the theme CSS section that I mentioned earlier. :slight_smile:

    Hope this helps!

    Kind Regards,
    Michael

  • Predrag Dubajic

    Hi Brett,

    Michaels code is correct and min-width: 668px means that the CSS code will be applied for screen size with minimum width of 668px, so all screens wider than that will use that code.
    max-width: 668px means to use the code on screens that have maximum width of 668px

    That being said, I'm not sure why the code provided is not working for you properly, so would you mind allowing support access so we can have a closer look at this?
    To enable support access you can follow this guide here:
    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Best regards,
    Predrag

  • Predrag Dubajic

    Hey @Brett,

    I had a look at your site and I have something else I would like to try, I wanted to add the code myself but something weird is happening when I try to access editor mode, can you check if it's working for you because it might be something related to my browser.

    If you are able to make changes try removing the previous code added and use this instead:

    #upfront-region-container-region-7 .upfront-region-container-bg .upfront-grid-layout,
    #upfront-region-container-region-2 .upfront-region-container-bg .upfront-grid-layout,
    #upfront-region-container-region-4 .upfront-region-container-bg .upfront-grid-layout,
    #upfront-region-container-region-1 .upfront-region-container-bg .upfront-grid-layout {
    	width: 100%;
    }

    Best regards,
    Predrag

  • Brett

    This is the CSS that I have in place at the moment

    /* Full width page headings */
    div#text-object-1430289985692-1671, div#object-1432539355983-1372, div#text-object-1432676143693-1610, div#object-1430289179261-1483, div#text-object-1432786210764-1898, div#object-1432786524877-1587, div#object-1432786537545-1753, div#object-1432786544598-1825, div#text-object-1432788319247-1493, div#text-object-1432788467536-1754, div#text-object-1432788628375-1754, div#text-object-1432789587715-1578, div#text-object-1432789620205-1607, div#text-object-1432790031112-1528, div#text-object-1432790256084-1802, div#text-object-1432852627111-1292, div#text-object-1432852783357-1197, div#text-object-1432853089976-1164, div#text-object-1432853305556-1499, div#text-object-1432853721958-1975, div#text-object-1432853858886-1611, div#text-object-1432854083454-1497, div#text-object-1432854483924-1452, div#text-object-1432854665021-1943, div#text-object-1432854940907-1047, div#text-object-1433135482133-1059, div#text-object-1432855183502-1546, div#text-object-1432855500758-1927 {
        margin-left: -48%;
    	width: 196% !important;
    	max-width: 200% !important;
    }
    
    div#text-object-1430289985692-1671 > h1, div#object-1432539355983-1372 > h1, div#text-object-1432676143693-1610 > h1, div#object-1430289179261-1483 > h1, div#text-object-1432786210764-1898 > h1, div#object-1432786524877-1587 > h1, div#object-1432786537545-1753 > h1, div#object-1432786544598-1825 > h1, div#text-object-1432788319247-1493 > h1, div#text-object-1432788319247-1493 > h2, div#text-object-1432788467536-1754 > h1, div#text-object-1432788467536-1754 > h2, div#text-object-1432788628375-1754 > h2, div#text-object-1432789587715-1578 > h1, div#text-object-1432789587715-1578 > h2, div#text-object-1432789620205-1607 > h2, div#text-object-1432790031112-1528 > h1, div#text-object-1432790031112-1528 > h2, div#text-object-1432790256084-1802 > h2, div#text-object-1432852627111-1292 > h1, div#text-object-1432852627111-1292 > h2, div#text-object-1432852783357-1197 > h1, div#text-object-1432852783357-1197 > h2, div#text-object-1432853089976-1164 > h1, div#text-object-1432853089976-1164 > h2, div#text-object-1432853305556-1499 > h2, div#text-object-1432853721958-1975 > h1, div#text-object-1432853721958-1975 > h2, div#text-object-1432853858886-1611 > h2, div#text-object-1432854083454-1497 > h1, div#text-object-1432854083454-1497 > h2, div#text-object-1432854483924-1452 > h1, div#text-object-1432854483924-1452 > h2, div#text-object-1432854665021-1943 > h1, div#text-object-1432854665021-1943 > h2, div#text-object-1432854940907-1047 > h1, div#text-object-1432854940907-1047 > h2, div#text-object-1433135482133-1059 > h1, div#text-object-1433135482133-1059 > h2, div#text-object-1432855183502-1546 > h1, div#text-object-1432855183502-1546 > h2, div#text-object-1432855500758-1927 > h1, div#text-object-1432855500758-1927 > h2 {
    	width: 54%;
    	margin: 0 auto;
    }
    
    @media only screen and (max-width: 668px) {
    div#text-object-1430289985692-1671, div#object-1432539355983-1372, div#text-object-1432676143693-1610, div#object-1430289179261-1483, div#text-object-1432786210764-1898, div#object-1432786524877-1587, div#object-1432786537545-1753, div#object-1432786544598-1825, div#text-object-1432788319247-1493, div#text-object-1432788467536-1754, div#text-object-1432788628375-1754, div#text-object-1432789587715-1578, div#text-object-1432789620205-1607, div#text-object-1432790031112-1528, div#text-object-1432790256084-1802, div#text-object-1432852627111-1292, div#text-object-1432852783357-1197, div#text-object-1432853089976-1164, div#text-object-1432853305556-1499, div#text-object-1432853721958-1975, div#text-object-1432853858886-1611, div#text-object-1432854083454-1497, div#text-object-1432854483924-1452, div#text-object-1432854665021-1943, div#text-object-1432854940907-1047, div#text-object-1433135482133-1059, div#text-object-1432855183502-1546, div#text-object-1432855500758-1927 {
        	margin-left: -25px;
    		width: 196% !important;
    		max-width: 115% !important;
    	}
    }
  • Brett

    Hey Predag,

    That definitely works awesome on the mobile level..

    On the various sub pages on desktop though the headings are justified all the way to the LHS. The scale in when you drag the browser inwards but I think that we are missing the >H1 and >H2 widths that was in the second part of my first batch of CSS

    div#text-object-1430289985692-1671 > h1, div#object-1432539355983-1372 > h1, div#text-object-1432676143693-1610 > h1, div#object-1430289179261-1483 > h1, div#text-object-1432786210764-1898 > h1, div#object-1432786524877-1587 > h1, div#object-1432786537545-1753 > h1, div#object-1432786544598-1825 > h1, div#text-object-1432788319247-1493 > h1, div#text-object-1432788319247-1493 > h2, div#text-object-1432788467536-1754 > h1, div#text-object-1432788467536-1754 > h2, div#text-object-1432788628375-1754 > h2, div#text-object-1432789587715-1578 > h1, div#text-object-1432789587715-1578 > h2, div#text-object-1432789620205-1607 > h2, div#text-object-1432790031112-1528 > h1, div#text-object-1432790031112-1528 > h2, div#text-object-1432790256084-1802 > h2, div#text-object-1432852627111-1292 > h1, div#text-object-1432852627111-1292 > h2, div#text-object-1432852783357-1197 > h1, div#text-object-1432852783357-1197 > h2, div#text-object-1432853089976-1164 > h1, div#text-object-1432853089976-1164 > h2, div#text-object-1432853305556-1499 > h2, div#text-object-1432853721958-1975 > h1, div#text-object-1432853721958-1975 > h2, div#text-object-1432853858886-1611 > h2, div#text-object-1432854083454-1497 > h1, div#text-object-1432854083454-1497 > h2, div#text-object-1432854483924-1452 > h1, div#text-object-1432854483924-1452 > h2, div#text-object-1432854665021-1943 > h1, div#text-object-1432854665021-1943 > h2, div#text-object-1432854940907-1047 > h1, div#text-object-1432854940907-1047 > h2, div#text-object-1433135482133-1059 > h1, div#text-object-1433135482133-1059 > h2, div#text-object-1432855183502-1546 > h1, div#text-object-1432855183502-1546 > h2, div#text-object-1432855500758-1927 > h1, div#text-object-1432855500758-1927 > h2 {
    	width: 54%;
    	margin: 0 auto;
    }

    how would we include this to make sure that the H1 & H2 come in and align with the rest of the elements within the grid?

  • Adam Czajczyk

    Hey Bret,

    I hope you're having a great day! Would you mind if I add something here?

    I took a look at your site. It seems that I've got pretty much the same monitor as you do: Dell with native 1280 x 1024 resolution, so I can reproduce the issue exactly by comparing the views on Dell and on my laptop's screen.

    I've examined both H1 and H2 tags styling and I couldn't help but notice that the font size for these is set to fixed value of 50px for H1 and 35px for H2. If I'm not mistaken, setting these values differently for various break points (media queries) or switching to "em" instead of "px" should make headlines responsive, thus being scaled and aligned properly.

    That being said, could you try either:

    1. Adding "font-size: XXpx;" to your media queries (where XX stands for pixel value that you just have to find out by experimenting a bit)

    or

    2. Setting "font-size: XXem" for overall style (again, value to be find by experimenting)

    Cheers,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.