I do not understand why my portfolio area is going full width. I would like that the row that contains 4 pictures, is staying inside the content area (red lines I marked):
[![Content area][1]][1]
I have tried everything that I know until now. In the developer tools I was trying to set a smaller width, but that did not work out. Does anybody have a suggestion on what I can do?
[Link to the testing page][2]
Add class section-boxed to this <div class="wpb_column vc_column_container vc_col-sm-12 section-boxed">
you need to wrap your pictures container with a div with this class section-boxed and it will work.
As suggested by aimenzenasni, adding the class to the div (highlighted below) will sort it. Verified in Chrome Developer Tools...
Source Screenshot
Related
The html code on the actual webpage
Hello. I am having some problems with pictures not properly displaying on a website. I have added the picture and created a div.tag for it and also added it to the CSS but it simply will not show properly. http://mala.co.uk/projects-sw-adelphi.html is one of the new webpages that I have added. http://mala.co.uk/projects-cat-a-eastcheap.html is a webpage with a picture being displayed properly. It is really baffling me why the new pages I have added have the pictures being cut off while the older pages render the pictures perfectly. The Eastcheap picture is how the size should be (more square) but new pages are showing the images more rectangular. Any help would be massively appreciated. Kind Regards
You have set a specific height for the large-6 columns divs. Changing that height has an influence on the image, as it is relative to the parent div container.
I am not sure how that height is generated or if you have hard coded that. It might also depend on the text on the right col, which will change the height of the left col.
Edit: I have edit your code in the inspector. It looks like that.
<div class="large-6 columns panel-container" data-equalizer-watch="" style="height: 450px;">
I'm debugging a website for a code written by somebody else. Typically I used bootstrap for responsive rows and columns but I believe this site is built on zurb-foundation.
Here is the url of the page. (www.edcast.com/privacy)
screenshot for a a visual of what i mean.
http://imgur.com/WTGDQTK
I will play around with this, but having a second eye and some other input would be highly appreciated!
Update: So far I've tried changing "overflow: visible" to hidden and auto
I've also tried to apply a clear: both to a variety of different divs
If you take a look at the image I posted below, you can see that the div with the id image-top-div is pushing everything over. You will need to resize the image and play with the margin and padding. You can see me here in the gif taking out the margin-left which solves it.
I'm working on a website which is working perfectly on every browser except firefox. In firefox extra space is added at the end and an extra vertical scrolling is there. My website is hosted here. Can anyone please tell me whats going wrong.
The I frame could be causing it. If you add
Style="position:fixed;"
in a div serving as the back ground like this
<html><head><title>your title</title></head><body>
<div Style="position:fixed;" name="entire web page">
<p><h1>HI and welcome to my world</p>
<div>some content...</div>
</div>
You might also add it to any "big" items like large pictures
it will also help if to make sure all of your appending** height percentage add up to no more than 100% trying to display 140% of a screen means it needs a scroll bar. a have had this trouble me for days before. **Any object that is stacked on top of another.
Been struggling with this for at least a couple hours now. Tried searching around but no solution seems to be working. So anyways, I have a template that I'm working on, and the issue that I'm having is that the sidebar on the left just will not stretch all the way down! If the window is maximized, it looks totally fine. Once you resize the window though it breaks, leaving a large gap between the sidebar and the footer. It also breaks if the content goes down the page any more than it currently does...
See for yourself here: http://bakedcraft.ca/laboratory/testsites/crock/template.html
and the css: http://bakedcraft.ca/laboratory/testsites/crock/css/default.css
Any ideas?
Add position:relative to your .main class
right now your side bar is 100% height of the window, not the main container. by adding position:relative to the sidebar's parent, when the sidebar is 100% height, it becomes 100% of the main div.
Sorry, this isn't really an answer but it's not letting me write a comment...
I looked at your code in firebug (firefox + web developer add-on) and it's showing a box constraint of 467px height I tried to quickly find where this 467px are coming from but can't see it with quick look (it's 4 AM). It's inheriting that height from somewhere, most likely from a combination of other size constraints of related elements. With all the positioning you have going on, in may be hard to locate.
One suggestion I have is if you plan on making a fluid layout you should work with em's rather than straight pixels. As I said, this isn't an answer but I did notice the size constraint of your sidebar. If this problem is still open in the morning I'll see if I can get a better look at it for you.
Alright I was running your problem through my head and I think I figured it out. Forgive me cuz I'm typing this on my phone and can't use firebug to verify if I'm right or not but the constraint I noticed earlier of 467px is n't inherited from another container it's being constained by the text in the sidebar div. If u were to add more text the box will grow with it. I believe what u may want to do is make a child conatiner within the side bar div. Your main sidebar div will only house your grey background color grey. Create a child div within the sidebar div and put your text and images into those. Make sure on the parent div you make it's height 100%. The height of the elements inside the child div shouldn't need height specifications since they will be inherited from the parent sidebar div. Hope this makes sense.
You can do the fix mentioned earlier with using jquery but remember if someone shuts of their JavaScript then your issue remains and your page will break. You should try to find and fix the root cause not use a bandaid that can be taken off.
I am trying to use a div to push the contents of a webpage down by 150px (the space will be used for a header image later that I don't yet have).
However because the div is blank or empty, browsers are in effect, ignoring it.
The html:
<body>
<div id="header_block"></div>
.... rest of document....
The CSS:
#header_block{width:100%;height:150px;min-height:150px}
The rest of the document works fine, but, even when I get the header graphic, its going to be applied as a background image.
Is there any way to stop the browser from ignoring this header_block because it thinks its empty?
What you want to do is give the main <div> a margin-top:150px ; that will push it 150px down from it's position in the flow then you should be good to go insofar as making your background image appear.
you can use trans.gif (a blank small image) using width and height according to your need. Then proper space will set.
Regards,
Arun Kumar
Try this:
#header_block{width:100%; border:1px solid;height:150px;min-height:150px}
So that you will get a look for header_block.
Divs don't hide if you've set their height explicitly via CSS. If it is hiding you've got other problems, likely due to a typo or incorrectly linking a stylesheet.
If you need a placeholder image, I use http://placehold.it/ which I find very convenient.
I have no affiliation with placehold.it
Something like https://placehold.it/300x100 gets you: