Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

image 100% width of browser question WordPress

Hi! I want to have an image on top 100% width of the browser window. Responsive if possible.

I somehow managed it, but:

1: it should be 340px high, but it shows only 240px of it,

2: I got the horizontal scrollbar. I dont want that. it should be always 100% width.

3. Actually I want the behavior of the image like on this page: (resizing etc in wrapper)

http://www.squarespace.com/trademark-guidelines/


Oh its not wordpress, its squarespace, but I think its just a css problem/answer.


Here you can see the page (my question is about the top dark image):

https://truedogsphoto.squarespace.com/read-me

You have to click on the client to enter the site (if not please let me know).

Answers (2)

2013-05-03

Dbranes answers:

Hi, it's password protected


klaus dyba comments:

,Dont you see a startpage which says squarespace trial and 2 buttons? owner login and visitor access?


Dbranes comments:

found it ;-)

Try this:

.intrinsic, .image-block-wrapper{
height: 340px;
}


Dbranes comments:

hmm there are some inline styling, that are not making the above work.

Is it javascript running that changes dimensions of the elements on browser resize?


klaus dyba comments:

Thanks, well squarespace is not suposed to be manipulated too much... so i am not sure.

I tried your tip and the image wrapper (?) shows now 340px. But not the image itself... it doesnt show the full height just a part of it... any idea?

The green is the background color.


Dbranes comments:

I found the green background here:

#block-1773600002d93a4d6123 {
background: green !important;
...
}


This is the <strong>div</strong> wrapper around the image:

<div class="image-block-wrapper content-fill" data-description="&lt;p&gt;nm,nm,nm,nm,&lt;/p&gt;"
style="padding-bottom: 17.142857142857142% !important; height: auto !important;" id="yui_3_7_3_1_1367600031175_178"><img alt="nm,nm,nm,nm," data-image-focal-point="0.5,0.5" data-image-dimensions="1400x340" data-image="http://static.squarespace.com/static/5155d3f4e4b02f77ba725969/t/51837629e4b04fc5ce6d1500/1367569962575/neo-flyer-1-header-340.jpg" data-src="http://static.squarespace.com/static/5155d3f4e4b02f77ba725969/t/51837629e4b04fc5ce6d1500/1367569962575/neo-flyer-1-header-340.jpg" style="max-width: none; top: -50px; left: 0px; width: 1400px; height: 340px; position: absolute;" class="" src="https://static.squarespace.com/static/5155d3f4e4b02f77ba725969/t/51837629e4b04fc5ce6d1500/1367569962575/neo-flyer-1-header-340.jpg?format=1500w"></div>


you can see that there are some inline stylings (some are calculated on resize via javascript)

Try for example to replace:

height: auto !important;

with

height: 340px;

just to test it.




Dbranes comments:

ps: it looks like I was wrong about the javascript resize calclulation on the image div wrapper,

it looked to me that this part:

padding-bottom: 17.142857142857142% !important;

was changing because of the of the large number of decimals :-)


klaus dyba comments:

mmm... i think i make it all more worse! :-)

Before I asked, I already added some css (see below): But right now I deleted it so you might have a better look how it is without the css. I just added a red background color so you see which image I want to have full browser width...

#block-1773600002d93a4d6123 {
background: green !important;
width: 1000px !important;
/* max-width: 1400px !important; */
z-index: 13000;
left: 50% !important;
margin-left: -800px !important;
padding-left: 0px !important;
padding-right: 0px !important;

position: relative;
top: 0px !important;
text-align: center !important;

}


Dbranes comments:

I have to go now, but I will have a look again tomorrow ;-)

cheers


Dbranes comments:

Hi, looks like you have changed it, at least the problems seems to be gone now ;-)


klaus dyba comments:

I managed it somehow with a background image and i pushed the content from top with a % now it even works responsive (kind of). Still thanks for your effort!

2013-05-04

DHRUBA BHOWMIK answers:

CSS can be tricky. There are lots of things that can go wrong, or at least not as you expect, and trying to determine what the problem is can be almost as hard as writing the CSS in the first place. The key to finding and fixing your CSS problems is three-fold:

1 finding the problem
2 isolating the cause
3 fixing it

Find and Fix CSS Problems by Thinking Small

While your goal is, of course, to fix the problem, but in order to do that, you need to find the problem. And the best way to do that is to think small. What is the smallest amount of HTML and CSS code that you can create and still generate the problem? The advantage to this is that often you'll see what the cause is while you're looking for the problem.

And if you can't find it, the smaller a chunk of code you have the more likely you'll be able to find help in Web design forums and from your friends and co-workers. No one wants to look at 3000 lines of someone else's (or even their own) code. But most people won't hesitate to look at 10-20 lines.

First Thing: Simplify the Page

If the page uses JavaScript, Flash, PHP or a blog or CMS, get rid of that. If you're trying to fix a CSS problem then the first thing you need to be sure of is that it is a CSS problem. And to do that the problem should appear on pages with just HTML and CSS. If you can't recreate the problem without the JavaScript, Flash, PHP, or whatever, then chances are it's not the CSS that's causing your problem.

An easy way you can simplify the page is to view the source file. Copy and paste the HTML that shows up there into a new editor page and save it to your hard drive. There may still be a few lines of JavaScript or Flash, but you can get rid of those easily once you have the stand-alone HTML and CSS.

Step 2: Move It to Your Hard Drive Away from the Server Files

Grab all the related files: the HTML you created above, the images on the page, CSS, JavaScript you can't live without, etc. and put them in a directory on your hard drive. You need to control what the Web page is using.

An easy way to find external files is to use your editor to search for "http:". If you don't use full URLs for your file references, you'll need to search the document manually for the locations of external files. If you can turn off your internet access, for example, by turning off your wireless card, this can help you find external files too.

Step 3: What Browsers Are Affected?

Most CSS problems are not equal because the browsers that display them aren't equal. So before you start isolating the cause of your problem, you need to make sure you know where it happens. Open the local file in your favorite browser and then as many other browsers as you can. It's best if you can do your testing on a system with a virtual machine, so that you can test in both Windows and Macintosh browsers.

You need to know which browsers the problem occurs in so that you can test in those browsers to find a fix. But don't forget to test in the working browsers as well. A fix for one browser might result in breakage in another.

Step 4: Start Your Simplifying

Once you have your page isolated, start simplifying what you have on the page. Remove both HTML and CSS, periodically testing to make sure the problem is still there. Cut away as much of the HTML and CSS as you can without removing the problem completely. This is isolating the cause.

For example, if the problem is in your navigation, then you can get rid of all the HTML that isn't building the navigation: internal div tags, headers and footers, etc. Once you have the minimum HTML required to keep the problem happening, then start paring away the CSS. Be sure to test every few minutes. Sometimes the stupidest things can cause the problem, and you won't know what made it go away until you try. Once you've removed a line of CSS or HTML and the problem disappears, make a note of that line and put it back in your document. If you can tell how to fix it from that line, then you're done. Otherwise, keep removing lines and testing what happens.

My technique is to remove one line if CSS or HTML then test. If the problem is still there, I save the file and do it again. If the problem is not there, I either fix the problem or put the line back and make a comment and keep going. It's slow going, but it works.