I'm running a site on the responsive Sterling WordPress theme (www.bandleandzaeske.com), and I'm having issues with the responsiveness of the body copy. The header and footer of the site are both responsive on mobile and browser-resizing tests, but the body text bleeds into the left and doesn't conform to the resize.
If I change the following "width" definition to 100%, it works fine, but it also pushes the one_third form below the text.
.two_thirds {
width:640px !important;
float:right !important;
}
Any ideas? Suggestions? I'd be happy to copy more code if that provides more insight.
Thanks!
Change width to max-width should work:
.two_thirds
{
max-width:640px !important;
float:right !important;
}
Simply remove width: 640px !important; from the following CSS style in your index.php (line 368). (Leave float:right!important as it is):
.two_thirds {
// width: 640px !important;
float: right !important;
}
That should fix the issue, as this code is overriding your theme.
Apparently, these styles are generated based on your theme settings, I guess that's where you can change this.
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.
I have a Wordpress website installed "Quidus Theme" http://theme.socialflag.net/latest-free-wordpress-themes/.
There is a big unnecessary space from the right side which looks is very bad.
I want to remove this space and want my web pages to fit to the whole screen.
If there is something i can change in my CSS style please let me know.
One of my friend provided this code but I don't know what to do with this or where to put the code.
Note: I want all my posts to fit to full width not only the page link i provided.
<pre>
#media screen and (min-width: 1105px){
.site-content {
width: 78%;
}
</pre>
Undertake the following:
Override the max-width property in the layout to 100% (or if you'd like, you can look for the rule and remove it in your css
Set your div with id content to a width of 78%
click here for codepen
Change the css site-content in media screen and it will look like the attached image:
<pre>
#media screen and (min-width: 1105px){
.site-content {
width: 78%;
}
</pre>
Use the developer tools in your browser (i.e inspector in Chrome or firebug in Firefox) to see where the padding is coming from.
Either the padding is applied to something other than the body, or the padding is applied to the body but is still overriding your CSS. For example:
body.class {
padding: 20px;
}
Would override your CSS. or
body {
padding: 20px;
}
Declared after your CSS would still override.
I face same problem on my website http://calendarsnews.com/ But when I used this process after it solve my problm
I'm fairly new to CSS responsive coding. I've used a premade boostrap template and modified it. Its working fine. The only issue is when this website is viewed on Firefox responsive design tool at different size a mysterious white space appears after the footer.
Check the screenshot below for the mysterious white space being shown when i try to view the webpage on Firefox responsive design tool at: 768x1024 . How do we remove or hide this extra space ? I have tried; overflow:hidden; but its not working. Check this Website Link for the online version of the page
Please check the image screenshot.
That space is due to the site not being 'long or tall enough' for that specific device. You can fix it by instead of using height:auto on your .wrapper element, use height:100vh.
.wrapper {
min-height: 100%;
height: 100vh !important;
margin: 0px auto -155px;
border: 1px solid #F00;
}
100vh will get the vertical height of the specific viewport that it is being used on so it will always take up the screen.
Here is a little more on Vertical Viewport Heights
Hope this helps!
It is your footer element which is at the bottom of the page.
.footer, .push {
height: 155px;
}
Also, your fix is a greasy on and won't work always:
.wrapper {
margin: 0 auto -155px;
}
I'm trying to put an iframe into a webpage, but no matter what I try to put in either the iframe properties or the custom CSS section of the website builder (or how many times I try to add !important to anything from width to right-margin), I can't get the iframe to extend rightward further than the page's preset width.
Here's an example of the page and iframe that I'm working with: (Edit: no longer available)
I need that script/iframe to be wide enough to show the search area. It seems pointless to copy and paste code and attributes I've tried setting, because nothing I do seems to have any effect, but just for showing how much I have no idea what I'm doing, here's my iframe code:
<iframe id="idxFrame" style="padding:0; margin:0; padding-top: 0px; overflow-x:auto;
width:1000px!important; border:0px solid transparent; background-color:transparent;
max-width:none!important; right-margin:-200px!important" frameborder="0"
scrolling="on" src="http://www.themls.com/IDXNET/Default.aspx?wid=8MSsp7Pf9eI55yjkDuB%2blX5awn7LnnVXh5PNYhq2ImAEQL"
width="1200px" height="900px">
</iframe>
The "Website Builder" that I'm forced to use to make these kinds of pages is infuriating, but it does have a "Custom CSS" area where I can input additional CSS information. Is there something I could generically use to set iframes to their own widths?
The reason it is being cut off is because there are some parent containers in the page structure that have the attribute overflow: hidden; to ensure content that is too wide doesn't break the layout.
I don't know how your system works but you could try adding the following code to your Custom CSS area:
.LayoutContainer {
overflow: visible !important;
}
.LayoutContainer div div {
overflow: visible !important;
}
Be aware that it will mess with your layout and spawn a horizontal scroll-bar on smaller screens.
Update:
The above CSS would affect your entire website. If you really want to go through with it, use the following CSS instead to make sure only this page is affected. The system generates a unique ID number for every page and we're taking advantage of that.
body#page_33219e82-0110-40bb-a172-3d05dc78f406 .LayoutContainer {
overflow: visible !important;
}
body#page_33219e82-0110-40bb-a172-3d05dc78f406 .LayoutContainer div div {
overflow: visible !important;
}
I believe your problem is that your are using right-margin when you should be using margin-right
Here is what I modified to get it to work and here is a screenshot: http://screencast.com/t/R2VeIAnNJVd
.LayoutContainer { overflow: visible; }
.LayoutContainer div div { overflow: visible !important; }
As stated above and as seen in the screenshot, you can see that the iframe extends out past your content wrapper.
There are similar questions to this but none of them are solving this problem.
I have built my site using a skeleton framework (http://www.getskeleton.com). For some reason, when i try to apply padding or any margin greater than 5px to the content in the main div on the site, the text portion jumps below the image. I've tried using their "offset-by" classes but the same thing happens. I've tried using
margin:0 auto; on all divs in that section but to no avail. I've also tried using text-align:center; but that didn't work either (oddly, this only centers the h1 element in that section but nothing else...).
The other issue I'm having is that I want all the backgrounds to expand to fit the width of the browser window and all the content should remain in the center but that doesn't seem to work well with this layout. If I set the container div's width to 100% it does expand but I end up having to set all the column and offset-by classes to 100% as well and then that messes up the navigation, etc. I want to keep my layout how I have it now but I just want the backgrounds to expand (including footer height) and for all content to be centered.
Here is the screenshot of what it looks like in the browser: http://i.imgur.com/K3LAshv.png
Can anyone please take a look at the code and let me know what I should fix here? I've added my code on JSFiddle:http://jsfiddle.net/z9uVK/
Many thanks in advance!!
The skeleton is confusing the hell out of me, there is just so much going on... so I eliminated all CSS and added a few simple rules demonstrating the techniques I would use to code this behavior from scratch
Since you want the background color bands to extend beyond the container, I am setting the container to 100% and placing extra divs around each of header, main and footer. These have width 100% also. The width of #header, #main, footer is set to 960px by default and reduced with a media query. I have also set the columns and the headshot image to use percents instead of pixels. I also removed a couple inline style rules from the HTML because they were breaking this new code.
http://jsfiddle.net/W7wG3/1/
// part of my css:
.container{width:100%;}
#headerBin{
background-color: white;
border-top: 15px solid #4d4d4d;
}
#header, footer, #main{
width: 960px;
margin:auto;
}
#media only screen and (min-width: 768px) and (max-width: 959px) {
#header, footer, #main{
width: 768px;
margin:auto;
}
}