I've been working on a wordpress theme and just now noticed that the width of the page is more than 100%.
I know that posting the code here would be helpful, but I don't know what portion of the code is the culprit. Whether it's a wierd HTML issue or CSS or otherwise.
I've tried removing the javascript links in the header as a hatchet approach but that didn't do anything for me.
I'm stumped.
Please take a look here:
http://naac-hf.org/dev/
Any help would be sincerely appreciated.
Thanks.
It looks like it is your #secondaryNav. I changed the with to 800px and the horizontal scrollbar went away.
I would invest in Firebug. It helps a lot with finding problems like this.
In your CSS Change this:
#secondaryNav {
float: right;
position: absolute;
text-align: center;
background: url(assets/img/bg_subHeaderBar.png) no-repeat bottom left;
width: 100%;
height: 50px;
top: 100px;
}
To this:
#secondaryNav {
float: right;
position: absolute;
text-align: center;
background: url(assets/img/bg_subHeaderBar.png) no-repeat bottom left;
width: 750px;
height: 50px;
top: 100px;
}
The 100% width is causing it to overflow the page currently.
Related
This is more of a "how do they do this" question than a need for a specific solution.
I've visited a few sites that have an elegant and natural-appearing easing on page elements which react to page scrolling (to initiate) but also continue after the scrolling stops (allowing the elements to ease into a stopping point).
Having looked up various searches for combinations of "parallax," "scrolling," "easing," etc., I can't find a starting point for how to achieve a similar experience.
Examples of this interactivity
https://la.pizzeriamozza.com/
Seen in the photo in the first "Pizzeria Mozza is known for its California ingredients..." section as well as the cards for "Bar Special" and "Red Sauce Dinner" further down the page (as of 10/3/2020).
https://droitthemes.com/wp/oppi-one-page/
Seen in the hero banner's device image and the screenshot/UI images in the "It's the food you love, delivered" section (along with other elements on the page)
In both sites, it appears that the elements have a dynamically changing transform: translate3d
style that is directly reactive to page scrolling. But, how that gets implemented & applied... I don't know.
I've tried looking up similar components used in each site (via BuiltWith.com), but that didn't reveal anything helpful (to me).
Any insight is appreciated.
.img1 {
display: block;
width: 100%;
background: url(https://images.pexels.com/photos/1640777/pexels-photo-1640777.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260) no-repeat;
background-size: cover;
height: 100vh;
background-attachment: fixed;
}
.img2 {
display: block;
width: 100%;
background: url(https://images.pexels.com/photos/1410236/pexels-photo-1410236.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940) no-repeat;
background-size: cover;
height: 100vh;
background-attachment: fixed;
}
.img3 {
display: block;
width: 100%;
background: url(https://images.pexels.com/photos/2641886/pexels-photo-2641886.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260) no-repeat;
background-size: cover;
height: 100vh;
background-attachment: fixed;
}
.color1 {
display: block;
width: 100%;
height: 100vh;
background: red;
}
.color2 {
display: block;
width: 100%;
height: 100vh;
background: black;
}
<div class="img1"></div>
<div class="color1"></div>
<div class="img2"></div>
<div class="color2"></div>
<div class="img3"></div>
Thanks to a comment from #dantheman - my question is resolved. Some key takeaways for anyone who may be searching out a similar solution are the terms "inertia scroll" and "momentum scroll" (the terms for the type of interactivity/behavior that I was seeking).
Along with dantheman's suggestions of:
dixonandmoe.com/rellax
and
min30327.github.io/luxy.js
I've found that locomotivemtl.github.io/locomotive-scroll appears to be just what I need.
It's worth also adding that Rellax doesn't have the easing I was seeking, but adding a CSS transform transition as noted here can get you something pretty close.
I am trying to change content and sidebar width of my site http://www.howto-connect.com/. Unfortunately, I can't get a positive result. You can laugh at this simple question. But after making changes in CSS is not giving output. Thanks in advance for a help.
Have you tried to delete cache?
If you have a cache plugin on your site, try to delete cache and you can reload your browser without cache as well.
I had a look and it is #sidebar-container { width: 38%; position: relative; }
Answering "I want more space between sidebar and content and decrease the sidebar width"
Your #content is 70%, and #sidebar-container is 30%. Change these to how wide you need the sidebar, then add this css to your #content:
padding-right: 40px;
box-sizing: border-box;
Changing the 40px to how much "more space between sidebar and content" you need.
You can paste this css in your stylesheet
#content {
width: 69%;
}
#sidebar-container {
margin-left: 22px;
width: 28%;
}
If still does not work for you then use ! important like that.
#sidebar-container {
margin-left: 22px !important;
width: 28% !important;
}
It will prioritise your css.
I've been looking into sticking a "div" to the top of the screen when you scroll past it, or making the div scroll with the page when it reaches the top of the screen.
The issue i get when i try this matter is that changing to position: fixed; using either jquery or the simple css, removes the float from the element.
My layout look somewhat like this: http://jsfiddle.net/ThSXm/33/ <-- updated
So when the float is removed, the id="content" get's overlapped by the sidemenu, making the sidemenu bigger and out of place.
I need a solution where you dont have to alter the position of the elements or if there is some fix i can make on the content div so it wont get overlapped when changing the positions.
Update
Sandeeproop managed to help me with the positioning, but the scroll matter is still a issue.
As i mentioned in the comment for this question, the div has to scroll/stick to the top of the screen when the div is close to the top or reaches the top (and preferably stop once the div reaches the footer or is close to reaching the footer), because there are more divs (header/slideshow etc) before we reach the side menu, and you wont see the menu if you just use position: fixed.
Any thoughts?
/update
Looking forward to some answers!
//Jim
If i understand you question correctly.
Please check this fiddle.
#nav {
width: 136px;
position: fixed;
background: #FF0000;
margin-left: 1em;
margin-top: 1em;
}
#content{
width: 80%;
height: 600px;
background: #FF9966;
float: left;
margin-left: 170px;
margin-top: 1em;
}
You can set fixed margin-top values for nav and content elements.
Something like that http://jsfiddle.net/ThSXm/26/
#nav {
width: 15%;
height: 100%;
float: left;
background: #FF0000;
margin-left: 1em;
margin-top: 60px;
}
#content{
width: 80%;
height: 600px;
background: #FF9966;
float: left;
margin-left: 1em;
margin-top: 60px;
}
I guess what you are looking for is "position: sticky".
This is not yet supported by many browsers, but here is a pollyfill for it
http://philipwalton.github.io/polyfill/demos/position-sticky/
Have you considered a solution where you use position:absolute on the element?
Have it being absolute untill you need it to stick and then change it to fixed.
Here is a simple fiddle:
http://jsfiddle.net/dXe97/
if ($(this).scrollTop() > boxTop) {
$box.css({
'position':'fixed',
'top': 0
});
}else{
$box.css({
'position':'absolute',
'top': 150
});
};
The .box element is absolute positioned, but when you scroll down passed the element, it is changed to fixed and its top value is set to 0, and back again when you scroll up.
I have the BACKGROUND image doing everything I need correctly (because I am running Backstretch JS) on computer and ipad but when it comes to phones, it does not look so well? Any suggestions would be greatly appreciated..
http://www.closetvip.com/splash.html
I am using backstrech js for the background image
I have some changed in your code so please add this ID and Class.
#spanish {
position: absolute;
left: 200;
bottom: 100px;
float: right;
}
#english {
position: absolute;
bottom: 101px;
float: left;
}
You have use this css only for iPhone css not for all screen.
I am somewhat between new and intermediate at web designing / coding...
Here goes!
if you look at this :
http://jsfiddle.net/ZPufX/
the css indicates an auto scrollbar on the y axis.
the thing is that i am having problems making it to show up only when the text (multiple "some text" in the code) shows up, and morover, it is not even scrolling as it is...
any clue?
found the answer!!
in the propreties on the css file, go something like this :
div.example
{width: 960px;
height: 430px;
position: relative;
top: 90px;
left: 296px;
overflow: hidden;}
and then :
div.example
{width: 960px;
height: 430px;
position: relative;
top: 90px;
left: 296px;
overflow: scroll;}
this will cause the scrollbar to appear only when hovering over the box !
thanks to vimalnath for his help on the subject!
I just tried to change the position of the textbox to relative from absolute
Demo here:
fiddle