Hi I’m developing a site: HERE
My sidebar background color seems to be not getting in full width ,it has weird margin at right part. I have tried to manage by increase the size and move left by adjusting the padding at the left but the right side seems to be at is even if making the size of the background to 100% or 200%.
`
.sidebar .widgettitle {
margin-left: -50px; !important;
background:#606060;
padding:10px 0px 10px 25px;
text-transform:uppercase !important;
width: 210%;
max-width: 210%;
background-size: 210% auto !important;
height: auto;
}
`
It seems that css class container has a padding on both left and right at the value of 50 pixels. You can overwrite this in your own CSS file.
pic showing .container style in grid.css
The answer by Anmol Nandha is correct - it is caused by the .container element having padding-left and padding-right of 50px.
You could remove the specific styling in your grid.css, or if you don't want to edit framework files, you might consider adding a id attribute on the .container element, and cancel out the effects by setting padding-left and padding-right to 0.
Note that if you do that, then the contents in the left (main) part will stick to the edge. You might want to add padding-left: 50px on the .entry-content-wrapper to compensate for it.
Of course there is the option to tweak the CSS of your sidebar instead, but I have outlined the easiest way (in my opinion) to fix it.
Related
when I press on an image its supposed to blow up into a larger picture. However, I changed the size so the image isn't fully touching the bottom and top of the screen by changing the height to 90vh. However, now when I press the image you can see it shift up that 10vh before expanding the image. Can someone help me remove that jump?
https://darrientu.com/
.pswp { height:100vh !important;
margin:auto!important;top:0 !important;
bottom:0 !important;
}
.pswp__scroll-wrap {
height:90vh !important;margin:auto!important;top:0 !important;
bottom:0 !important;
}
It may be worth undoing any styling that you've applied to it and see if this kind of functionality is supported out of the box:
Using the barsSize option:
https://photoswipe.com/documentation/options.html
Or the parseVerticalMargin event:
https://photoswipe.com/documentation/api.html
I was able to achieve a gap at the top and bottom of the image at the PhotoSwipe demo site by selecting All Controls and adding the styles below to hide/disable the UI with CSS:
.pswp__ui {
opacity: 0!important;
pointer-events: none;
}
Using that in combination with the barsSize option should allow you to customise how big the gap is between the image and the browser viewport, though you probably won't be able to use vh as a unit, and will need to use something like Math.round(window.innerHeight*.1) to calculate 10% view height, or use a pixel value instead.
It's also worth looking into the Custom HTML in Slides topic in the documentation, as you may be able to add a spacer div before and after your image.
For a CSS only fix:
If you don't have access to change how PhotoSwipe is initialised, then the CSS below makes the animation less jumpy on your site, however, it does make the image go to full height first for a moment, before transitioning to 90vh.
Remove:
.pswp__scroll-wrap {
height: 90vh !important;
}
Add:
.pswp__scroll-wrap {
transition: transform 222ms cubic-bezier(.4,0,.22,1);
}
.pswp--animated-in .pswp__scroll-wrap {
transform: scale(.9);
}
To resolve the bounce, please change height: 90vh !important line under .pswp__scroll-wrap selector to 100vh. Like so:
.pswp__scroll-wrap {
height: 100vh !important;
margin: auto !important;
top: 0 !important;
bottom: 0 !important;
}
If you still want to have padding on top & bottom of the images while removing bounce bug, then either downsize the thumbnail image (one that is not used for slider) to match the full sized one (on that is duplicated via slider and scaled up) or add some kind of padding to the images.
Another workaround is to add padded blocks in .pswp__scroll-wrap:before and .pswp__scroll-wrap:after like so:
.pswp__scroll-wrap:before,
.pswp__scroll-wrap:after {
display: block;
content: "":
padding: 50px; // Set this to your preferred padding!
background: #ffffff; // also add transition for background, so it fades in nicely!
}
I couldn't find code where you defined slide thumbnail size prior the scaling, but my guess is that resizing it would also help keep the padding while having no bounce issue.
The whole issue is around you having those 90vh under the wrap while resizing the duplicate of the original image.
Kind of a conundrum. I have a div that is full height of browser with a background set as 100% size, and image content, in two inline divs set to vertical-align middle content with each other.
One of the divs, the image is "bigger" than the view port (this is needed unfortunately), so I have overflow: hidden set to the containing div of these two inner divs to hide whatever is outside the viewport (height 100%)
I know its sound weird to explain, so I set up a CodePen
https://codepen.io/deelite310/pen/bjvKPG
The issue I'm running into are several:
1) The right div content since the image is bigger than the div full height, its causing the left div content to "vertical align" with that full height, instead of the containing DIV's 100% height. That means the left div content is disappearing in the overflow: hidden;
2) When resizing the browser up and down (so say a view port of 1680x600), the content in the main section is covered up by the footer area (so the images disappear or are being covered up, the background isn't resizing down, etc)
so my questions are:
1) Resize divs and content if browser is not a normal viewport settings (like 1680x600) so that the main section shows fully, without the footer covering it up
2) Where both divs in the main section, show all the content, despite one side having content extending past the and hidden by overflow: hidden;
some of my CSS, you can see the whole thing at the CodePen link above
section {
width: 100%;
min-height: 100%;
display: table;
height: inherit;
margin: 0;
padding: 0;
background: url("https://placeimg.com/1000/400/tech/sepia") no-repeat center top;
background-size: 100%;
}
#hero #col {display: inline-block; width: 50%; verticle-align: middle;}
#hero #col:nth-child(1) img {width: 65%; height: auto;}
.place {margin-bottom: 20%;}
#footer {width: 100%; height: 400px; text-align: center; border-top: 1px solid #000}
#footer p {font-weight: bold; font-size: 32px; margin-top: 3%;}
To solve your first issue I would try, instead of a vertical-align, to add a float to your hero and col id. By the way, as your using the id col twice it would maybe be appropriate to use a class instead.
If using the float, you would have to add a clear to your footer probably but it should work. And, with the float, reduce a bit the width (48 or 49% instead of 50%) should help because, by adding borders you end up with more than 50% in width which can explain why the second block goes under the first one.
For the background-resizing you can still use a background-size:100% 100% however; be aware that your image can, with that method, appears weirdly, it'll end up distorted in some cases.
For your images size, I don't really understand why you go through a nth-child use. but, anyway, you can use overflow:auto instead of overflow:hidden which will allow a roll box to appear, meaning that your content won't simply disappear has it does with the hidden attribute.
It's the first time I ever answer to someone here. Hope it'll help...
I am currently working on this website: http://mdftanzania.com. I am using Wordpress and headway101. I want to have a full width green background color that applies to the begin part of the page: About Us and Services. I add a div class to the part of the page where the green background has to be. I tried to style the div class to a full width green background, this didn't work out and at the moment only a part is styled now (see the website: http://mdftanzania.com).
I understand that there is another solutions, that is creating a container or widget above the container for the content, where I place the first part of the page text in. The problem with this is that it is confusing for my client where to edit the text in the page. The simplicity of Wordpress goes basically away then. Because of that, I am looking for a solution with CSS styling, so the client is only dealing with the 's.
Does anybody has a solution for this?
Since you have predetermined a padding to the content block, it is obviously affecting all the child elements that are contained in it, including the div with green background, which means that you should either remove that padding and apply it only to specific elements, or apply this simple CSS workaround to your div:
{
margin: 0 -25px;
padding: 0 25px;
}
This makes it, in your words, "full width" and applies a padding to its content.
You have this rule set in your css:
.block-type-content {
padding-left: 25px;
padding-right: 25px;
padding-top: 120px;
}
So children of this container, even though they may have a width of 100%, have to obey this padding of their parent. That's why you don't get a full width green bar. You might try negative margin-left and right to expand your green bar:
.color {
margin: 0 -25px;
padding: 0 25px;
}
At least in Firefox/Mac, this solves your issue.
http://www.dirkdunn.com/web2
I recently made a responsive layout, setting the..
max-width:100%;
property in google chrome, which works perfectly for adjusting the header image size, however, in other broweser's such as firefox, the image overlaps the parent container on the left size.
I am familiar with scott jehls picture.js polyfill, however specifying the image size for each screen size sounds like a headache inside the picture tags, is there any way to combat this in other browsers similarly to how google chrome resizes this naturally?
or at the very least, is there some kind of math formula for knowing the right picture size via the browser width? thanks.
You have set the max-height of img to 100%, however you don't have the width of it's parent defined. So, it becomes confusing to the browser to determine 100% of what thing.
Let's give the parent a width -
#headlogo {
width: 100%;
}
Also set the margin accordingly, you might wanna use margin: 0 for #headlogo.
Simply remove the h1-parent of the image and it works. (FF 32)
Try this one
max-width: 100%;
display:block;
height: auto;
Assuming you are trying to center the logo.
I would remove the float: right from the H1 and remove the margin you have. Than I would add a text-align: center to the H1. This will solve your responsive logo issue and keep the logo centered.
Your Current CSS
#headlogo {
float: right;
margin: 0 15% 0 0;
}
Proposed Solution CSS
#headlogo {
text-align: center;
}
This is the code I am working with:
http://jsfiddle.net/BTYA7/
I can't work out why the toolbar (blue) is extending past the right side of the text box. There doesnt seem to be any padding or margin a miss.
I applied it in blue and pink to help show it:
.uEditorToolbar {background-color: blue;}
Can anyone give some guidance please?
The uEditorToolbar has two extra pixels of padding. width:100% sets the width not including padding. If need the padding, you can remove the width:100%, and the blue bar doesn't extend too far.
Is that what you need, or am I missing something.
The default layout style as specified by the CSS standard means that the width and height properties are measured including only the content, but not the border, margin, or padding. So the combination of width:100% and padding: 0 0 0 2px; is pushing the content out by 2px.
The default display for <ul> is block so the width:100% is probably unnecessary anyway.
If you remove the width:100% or the padding-left will fix the problem.
Alternatively, the CSS3 box-sizing property can be used to correct the layout by using box-sizing: border-box; (if all browsers you are targeting support the property).
There appears to be a 2px padding. If I remove the padding then it looks ok.
.uEditor .uEditorToolbar
{
list-style: none;
width: 100%;
height: 48px;
margin: 0;
padding: 0 0 0 2px;
}
http://jsfiddle.net/BTYA7/5/
Remove width:100%; padding: 2px; from the .uEditor .uEditorToolbar CSS class. It will work.