Make text box color background wider

nikidinov

I need some help :)
Is it possible to make the red background of the text box in this page http://www.nikidinov.com/Bg/Portfolio/Architectural-Photography
to be the full wight of the browser. Although the page width is set to 1160 px?

Lille Ulven

Hi nikidinov

It might be possible with a slight trick...I am not certain if it works, but you could try to add this to your css:

div.sm-page-layout-row.yui3-g [data-layout-row="w"]{
border-left: 2000px solid rgb{252,67,73};
border-right: 2000px solid rgb{252,67,73};
margin-left: -2000px;
margin-right:-2000px;
}

If you increase the pixel of the left border you need to have the same value for margin-left and vice versa for the right border/margin values.
Of course, you can replace the rgb-values with hex values–I just could not read out hex values so I went for the rgb instead.

Hope this does the trick for you.

Good luck

Lille Ulven

nikidinov

Generally it works. Thank you!
But if I copy and paste your CSS the color disappear - I mean that I replace my CSS.
If I add just the border and the margin value the text disappear.
So probably it needs some fine adjustment :)

My CSS is:

.sm-page-widget-17684282 {
background-color: #fc4349;
padding: 10px;
color: white
}

Lille Ulven

Could it be that your screen is smaller than those 2000px and that the text just is pushed out of the window in your case?

Try this (in addition to your css):

@media screen only and (min-width:4000px){
div.sm-page-layout-row.yui3-g [data-layout-row="w"]{
border-left: 2000px solid rgb{252,67,73};
border-right: 2000px solid rgb{252,67,73};
margin-left: -2000px;
margin-right:-2000px;
}
}
@media screen only and (min-width:1000px){
div.sm-page-layout-row.yui3-g [data-layout-row="w"]{
border-left: 500px solid rgb{252,67,73};
border-right: 500px solid rgb{252,67,73};
margin-left: -500px;
margin-right:-500px;
}
}

Might work. Else: try decreasing the margin-left / margin-right values until your text comes back into the window.

Good luck

Lille Ulven

Hikin' Mike

@Lille Ulven said:
Could it be that your screen is smaller than those 2000px and that the text just is pushed out of the window in your case?

Try this (in addition to your css):

@media screen only and (min-width:4000px){
div.sm-page-laylout-row.yui3-g [data-layout-row="w"]{
border-left: 2000px solid rgb{252,67,73};
border-right: 2000px solid rgb{252,67,73};
margin-left: -2000px;
margin-right:-2000px;
}
}
@media screen only and (min-width:1000px){
div.sm-page-laylout-row.yui3-g [data-layout-row="w"]{
border-left: 500px solid rgb{252,67,73};
border-right: 500px solid rgb{252,67,73};
margin-left: -500px;
margin-right:-500px;
}
}

Might work. Else: try decreasing the margin-left / margin-right values until your text comes back into the window.

Good luck

LIlle Ulven

Have you tried it? I was bored so I tried it using Firebug and it doesn't work.

Hikin' Mike

@Lille Ulven said:
Could it be that your screen is smaller than those 2000px and that the text just is pushed out of the window in your case?

Try this (in addition to your css):

@media screen only and (min-width:4000px){
div.sm-page-laylout-row.yui3-g [data-layout-row="w"]{
border-left: 2000px solid rgb{252,67,73};
border-right: 2000px solid rgb{252,67,73};
margin-left: -2000px;
margin-right:-2000px;
}
}
@media screen only and (min-width:1000px){
div.sm-page-laylout-row.yui3-g [data-layout-row="w"]{
border-left: 500px solid rgb{252,67,73};
border-right: 500px solid rgb{252,67,73};
margin-left: -500px;
margin-right:-500px;
}
}

Might work. Else: try decreasing the margin-left / margin-right values until your text comes back into the window.

Good luck

LIlle Ulven

You had a typo. You have .sm-page-laylout-row, but should say .sm-page-layout-row.

Lille Ulven

Thanks @Hikin' Mike :-) yea typos are stupid

Now the typos are finally fixed in my previous posts.

nikidinov

@media screen only and (min-width:4000px){
div.sm-page-layout-row.yui3-g [data-layout-row="w"]{
border-left: 2000px solid rgb{252,67,73};
border-right: 2000px solid rgb{252,67,73};
margin-left: -2000px;
margin-right:-2000px;
}
}

This doesn't work.
When I removed the first row - @media screen only and (min-width:4000px){ - the color is full width, but the text went far on the left. I have played with margins but couldn't place the text on the right place :(

Lille Ulven

When you are playing with the margins you need to play with both to an equal amount, and probably you would need to have the border px = margin px at all times just to make sure.
I took out the first line and changed the margins and borders to 600px to get the look in the screenshot.
So eventually you will probably need one media clause for phones (both landscape and portrait orientation), one for tablets (again both orientations), one for small computer screens and one for really big computer screens.

Hikin' Mike

@nikidinov & @Lille Ulven

Just thinking out loud. I haven't tried this, but couldn't change that page to stretchy and remove all of the margins/padding. Use a HTML/CSS block set for 1160px for everything but the red box. Add the add this to style it. No need to use media queries.

.sm-page-widget-17684282 {
    background-color: #fc4349;
    padding: 10px;
    color: white
    } 

nikidinov

I am going to give up. Probably I do something in a wrong way and it's not working
Thank you all!

Lille Ulven

No, don't give up yet. ;-(

Sorry I just love playing around with those kind of things whenever I have some time to spare (which is not often though).

Happy weekend

Lille Ulven

Hikin' Mike

@nikidinov said:
I am going to give up. Probably I do something in a wrong way and it's not working
Thank you all!

Don't give up. This will work, I tested it on my testing site.

First, you need to add a CSS block on that page, preferably near the top of the page. Add this:

.sm-user-ui .sm-page-layout-pagetemplate {
    max-width: 100% !important
    }

.text,
.sm-page-layout-row.yui3-g [data-layout-row="N"],
.sm-page-layout-row.yui3-g [data-layout-row="d"],
.sm-page-layout-row.yui3-g [data-layout-row="g"],
.sm-page-layout-row.yui3-g [data-layout-row="f"] {
    margin: auto;
    max-width: 1160px;
    }

.background {
    background: #fc4349;
    }

.text {
    padding: 10px;
    }

Next, you need to add a HTML block where your red box is to go. Add this to the HTML block:

<div class="background">

    <div class="text">

        content here

    </div>

</div>

Next, you need to copy the text from your current red box and put it where it says 'content here' in the HTML block you just created.

Then you need to delete your text block.

That should work. No need to use media queries.