What I am trying to do is get the grey boxes on this to go to the edge of the page, I have found a similar article here but when I have tried changing the margin and padding to 0 nothing is happening, this table is created in a cms that has been coded by previous developers and I have no idea why I can't get these grey areas to automatically fill the edge of any size screen.
Any help on where I am going wrong would be grateful as I am re-developing this website and need it done ASAP
you will have to remove the width of the wrapper to auto
then add to your content2 div something like: padding: 0 200px; for the gray only
Your #wrapper style is set to width: 970px. Change that to width: auto and you're good to go.
if you are talking about the box shown in blue below
is because the table is been redered inside the <div id="wrapper">
if you change the width: of the DIV to auto.... your boxes will go all the way to the edge as shown on the other image
after changing the width to auto of the wrapper div looks like:
Related
I am maintaining a hubspot website and recently I have been asked to change a few things in the webpage. The first thing was, change the image in the ATF section. The section was 2 header tags followed by a form and an image placed side by side. The parent div of the form and image was set to display: flex and justify-content: space-around. Now, after changing the image, I had to resize it as well, the alignment changed. Now the form doesn't have the same left alignment as the h2 tag and p tags above it. I never touched the margin and padding of the parent div or the children divs. All I did was change and resize the image. How do I align the form element to be at par with the other things in the page. Justify-content: space-between solves the alignment issue but creates a lot of empty space in between.
I have problem with my nav bar on a theme I am developing. http://astanmedia.com/blog All is ok at full screen, but reduce the screen size so the the menu collapses and when you click / touch the toggle button, the dropdown refuses to break over the slider, no matter what z-index is set, or positioning used. on scroll I have the nav change to fixed at the top, and it displays fine once the slider has passed it. The dropdowns also function fine over the slider at full screen. Have tried to paste code here for 15 minutes, I must be doing it wrong, so I have linked to a paste bin of the code here http://pastebin.com/6war9TGu. Thanks in advance
I think I see your problem. It's not the z-index, it's the navbar-collapse style.
You have:
.navbar-collapse { max-height: 50px; }
You need something like:
.navbar-collapse { max-height: 275px; }
According to the Google Chrome developer tools, you can find the .navbar-collapse style on line 106 of your style.css. In your Pastebin it looks like it's on line 94.
As a note, once you fix the .navbar-collapse max-height, you'll also need to add a background color to your .navbar .navbar-nav class so that the drop down menu doesn't have a transparent background.
I'm seeing a few other little things on your style that may need adjustment, but I'm going to assume that you'll ask specifically about these issues as you go. To fix the question you asked about, the navbar-collapse should help.
I'm using Isotope to present a grid of images within a Bootstrap 3 framework.
I've got a sticky footer (using recommended absolute positioning with bottom set to 0).
When the browser window is reduced in height, the div containing the isotope-d images doesn't stop where the sticky footer begins - so the bottom-most 60px of the div (actual amount depends on height set for footer) is hidden by the footer OR extends below the footer. The difference is determined on whether I set a height for the container divs.
Here's the html from https://codepen.io/marklsanders/pen/KrRVaK:
the codepen contains an example
I'm guessing the problem is caused by the fact that all the images positioned by Isotope are absolutely positioned.
Any suggestions as to how to work with this correctly?
thanks
Try changing your footer from position: absolute; to position: fixed;, and add padding-bottom: 75px; to your <body>.
Bear in mind that when you position absolute or fixed, that element is removed from the regular flow of the document. When you position it, it will most likely conflict with another statically positioned element.
In this case, adding padding to the body 'simulates' in the regular document the space that is actually occupied by the footer.
Additional note: The sticky footer approach generally means you'll need to set a fixed height for your footer. I've used 75px for the padding on the body, but you can fiddle with this for best results.
There is a large amount of white space below my flexslider and I do not know how to remove. I have played with the CSS quite bit and nothing seems to work, without breaking the "responsive" behavior. Any help is greatly aprpeciated.
Regards...
Site can be viewed here, all code in located in the head tag:
http://destinjustlisted.com/new/
Your div which contains the slideshow items must have the class "flexslider." Various things are setup for that class in flexslider.css, which is part of the download. One of the CSS properties it has is "margin." You'll see three values there. It looks like this:
margin: 0 0 60px;
I don't know if you're familiar with this property format, but it's common in CSS when you've got 4 settings, as with margin, border, or padding (all of which have 4 sides). You can have up to four values which represent: top, right, bottom, left (like you're going around a clock dial, starting with 12 o'clock). So, for example:
padding: 0 1px 0 2px;
would give no padding on the top and bottom, but 1 pixel on the right and 2 pixels on the left.
The flexslider CSS has 60 pixels of margin on the bottom. That leaves room for the navigation buttons if you want a visual representation of where you are in your slideshow or for you to select a specific slide. Unfortunately, if you set the property "controlNav" to "false" when you're setting up the plugin if you don't want to show those "buttons," then you just end up with the big blank area under the control. If you just set that property to this:
margin: 0;
all your problems will be solved!
If your images are different sizes (heights in particular), the Flexslider container will display as high as the tallest image. This can create the gap that you might see.
If this is the cause, resize your images in advance so they all have the same heights and widths.
Let's say i have a sprite with lots of icons. I want to place one of the icons in the specific position over the div, e.g. 15px from the right side and 20px from the top.
Previously, when i had single image file i used the following code:
background: white url(./imgs/some/icon.png) no-repeat 91% 47%;
Now then the image is in the sprite i can access it using
background-position: 0 -471px;
But as i see it there is no place to add my current 91% 47%. Is there some kind of workaround?
It's possible to use CSS3 in the project if it helps.
Thanks!
Would you be able to add another <div>, give it the correct background, and absolute position it where it needs to be? I'm thinking that your background-position percentages are probably out when you use a sprite sheet.
If I understand your set of constraints correctly, you might be able to pull it off with a single div, but only if your png has a transparent background and the icon has enough "transparent space" as to not reveal any other icons.
Try:
background: white url(./imgs/some/icon.png) 91% 47% no-repeat, transparent url(./imgs/some/icon.png) 0 -471px no-repeat;