So an old friend of mine who knows nothing about programming asked for help with his site. someone has built it for him long ago, here it is - http://challengetours.org/
The problem is with the site's width.
As you can see there is a scroll bar at the bottom of the site, which leads to a huge empty space.
There is no problem with that in particular, but when you open the site on mobile it's zoomed-out to see the whole site including the empty area.
what would be the easiest way to solve this ? I have some background but I've never used WP/JS/PHP/CSS :)
Thanks,
Itai
If WebElaine's comment above doesn't work, you can do the following.
You have two elements setting rules in the CSS:
Your div with id ___plusone_0 has an inline style set to "left: -10000px;".
Your iframe with the id st_gdpr_iframe has an inline style rule of "left: -5000px;".
Removing these two styles gets rid of the scrollbar.
If you are using Wordpress but aren't too familiar with it, you can add your own CSS IDs allowing you to target these elements and override the inline styles if there's an issue with the Wordpress theme itself that you can't otherwise access.
For example:
#st_gdpr_iframe{
left: 0px;
}
#smthemes_share .inner{
left: 0px;
}
Related
I'm simply trying to emulate one of these methods for stickying a video that will play as a viewer reads a blog post on my Squarespace site.
https://www.cssigniter.com/make-sticky-floating-videos-page-scroll/
https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning
How to make div fixed after you scroll to that div?
http://js fiddle.net/4mqLhnpf/
Preferably the video would lock to the top portion of the screen, allowing the article to be scrolled below it.
I've tried all methods listed above and none have worked. I've copied the code directly, and even changed IDs and classes in case something was overlapping and causing an error. Nothing works. Is this sort of functionality not allowed by Squarespace inherently or am I doing something wrong here?
You can try the CSS position property.
Simply add this to the div styling:
position: sticky;
position: -webkit-sticky;
top: 0;
So this is an "issue" that I've been experiencing for a new website that I've been building.
It utilizes WP Bakery's Visual Composer Row widget, and occurs when the CSS/JS kicks in to expand the header row from default to stretch.
Because the header row has a background colour, the initial header looks like this. However, when the CSS/JS kicks in to expand the row, it then "flickers" and looks like this.
This obviously looks very unprofessional, and was wondering can suggest anything that I could try.
Would appreciate any assistance.
Thanks!
This is similar to other FOUCs (Flash of Unstyled Content). You have a few options.
One is to add the stretch attributes to the element in question specifically. Basically take: .stretch { width: 100%; margin: 0 auto /* … whatever */ } and apply those styles to your element, ideally by ID: #my-header { width: 100%; margin: 0 auto /* … whatever */ } and put them in your header so they're loaded right away, perhaps in your Customizer.
Another option is to find another way to add the stretch class to that element manually. I'm not familiar enough with VC to give examples (though, to be honest the few sites I've made that use it haven't seemed to have this issue?). The benefit of this would be that you don't need to duplicate CSS attributes, and don't need to wait to JS to apply the class, which probably isn't happening until the entire footer is loaded.
Another option is the all-too common (and arguably unnecessary/annoying) "full page loader". This is the option I'd avoid if I were you, but you can plop in a full screen white page with your logo and a spinner that goes away when the entire markup is loaded or when all resources are fetched. This delays users accessing your site, and most users would prefer to see a FOUC than a loading screen, based on my limited testing.
So while working on a project I noticed that when I scrolled to the bottom the scrollbar would bounce back up a page.
Originally I had to make the front page have less vertical space for the footer and add the space for every other page.
So I moved:
body {margin-bottom: 150px;}
To:
body:not(.home) {margin-bottom: 150px;}
I'm answering my own question here though it's very clear Chrome has widespread issues with the scrollbar behavior in general. For people who aren't web designers it is possible to override the behavior on a live website and in some cases (with extreme subjectivity) programs (e.g. maybe the bookmarks page) though the issue in browser pages is overriding the browser's internal CSS which isn't always possible.
The fix, at least in the scenario I faced, was to split the margin in two and give the other half of the spacing to the padding-bottom.
So in example, this:
body {margin-bottom: 100px;}
Would become this:
body
{
margin-bottom: 50px;
padding-bottom: 50px;
}
This is however generally not an acceptable solution as there are very explicit reasons why margin and padding are two different contexts however the project I'm working on is very graphically heavy and requires breaking proper CSS conventions.
For non-web developers/designers who may come across this issue and page, as I mentioned in the question above, it is possible to override a website's CSS code if the CSS selector can be specific enough to only effect one website. The code would then have to be applied to the browser's master style sheet. I've done this in the past to negate Google forcing ads even around my Adblock Plus filter subscription and won. Each browser has it's own way of applying default styling, since this is a Chrome specific issue and I'm not as familiar with Chrome I did some digging to provide some bread crumbs and hopefully make someone's life just a bit easier:
https://superuser.com/questions/52967/change-default-css-of-google-chrome
I'm new to wordpress and website building. Just bought a theme and faced an issue.
I want to put my image over accordion div container. How I can do that? My theme has content building option, but as far as I know it doesn't support creating layers feature (nor any other content builder plugins, like this or this
I would really appreciate any kind of help!
If you find a way to customize the CSS, this should do the trick:
.column.one {
position: absolute;
z-index: 2;
}
The property position:absolute allows you to position the image freely using the CSS properties top, left, right and bottom.
z-index:2 makes sure, that the image is in front of the accordion.
Edit:
Turns out that there is one more problem: since the image overlaps the accordion, the overlapped areas are not clickable anymore. To solve this problem, you can use the CSS property pointer-events:none. But beware! This is not supported by IE and Opera. You may need to find a workaround for these browsers.
Browser Compatibility Table: http://caniuse.com/pointer-events
Article about the Property: http://www.sitepoint.com/css3-pointer-events/
I have created a Wordpress child theme based on Thematic and I'm currently trying to debug the site in IE 6/7. My suspicion is that the problem is hasLayout, as that seems to be very common and the symptoms are congruent, however I have checked many of the broken elements and added hasLayout properties to those that did not already have them with no advancement.
I did have z-index set in several of the CSS classes, which I have now removed, and I'm wondering if any of you have some other suggestion about other debugging approaches.
The site is: http://032b4a6.netsolhost.com/WordPress/
I have posted here instead of the Wordpress forum as I believe my problem is more related to a standard CSS issue than anything specific to WP.
EDIT:
To detail the kind of errors I experience in IE6/7:
The header, which is an anchor with a css background property, pushes down on the search box, causing large gaps.
The nav displays as if it has an extra 75px of margin under it, causing another large gap.
The right sidebar is missing. It can be found just barely peeking from the left side of the container below the left sidebar.
The left sidebar appears to have an extra 15px of left margin, pushing it onto the main content div.
To check if a layout problem in IE6 / IE7 is hasLayout-related problems, I sometimes find it useful to use a rule like this for debugging - it's propably not something you want to use in your final stylesheet (as it will probably introduce new problems), but often it can reveal what elements needs to be given layout:
* {
zoom: 1 !important;
}
Welcome to the world of conditional comments and IE stylesheets: http://codex.wordpress.org/Conditional_Comment_CSS You need to tweak the CSS for IE and test with native IE, not browser shots.
Try taking the slider out for a minute to see if there is a CSS conflict.
And you have a few minor html errors, one having to do with an inline style sheet:
[Invalid] Markup Validation of 032b4a6.netsolhost.com WordPress - W3C Markup Validator. Scroll down in the validation report to see line numbers and source code.