I am using twitter bootstrap and change default width to 1265px. Try resize out window to 1265px. (demo http://markup.website-builder.ru/demonstration/test.html )
In example we have few blocks and when you resize window - the bug appears. A mystic white line on the right of the screen http://take.ms/fOEn2
How could i fix this? Why is it appears?
Overflow-x is bad idea, because everything else will be broken.
Thanks
You need 30px width difference because you have 15px padding left and right, so that means there are two possible solutions:
#media (min-width: 1265px)
.container {
width: 1235px;
}
#media (min-width: 1295px)
.container {
width: 1265px;
}
Related
Codepen - https://codepen.io/spaOyst_/pen/bGWagKG
I am attempting to rebuild a site by going mobile-first but I am struggling with what I think is the responsiveness/resizing of the images or the other sections not resizing when browser width is increased, but the images grow quite large and overlap the section below.
I have tried adjusting the width and height of the images, anchor tags and the section below the images
If anybody has any ideas of what the cause would be, I would really appreciate the help.
At line 246 of your CSS, you've set the height of the lightbox section to 700px and this non-responsive height is causing problems at viewport widths of about 490 - 760px.
It isn't clear to me why you even need to see the height of this lightbox section, but if it's necessary, what about adding an extra breakpoint?
#media (max-width: 490px) {
.lightbox-section {
height: 700px;
}
}
#media (max-width: 760px) {
...
.lightbox-section {
padding: 63px 10px;
/* height: 700px; */ Either comment this out or adjust as needed
text-align: center;
}
...
}
https://codepen.io/panchroma/pen/QWvaMEd
I can see that you've set a pixel height for the index-services section as well but the image links are broken so I can't see if there's an issue in this section as well or not.
On our website: https://dev.shiftdivorceguide.com/ everything looks great on desktop.
When I switch to smaller screens like tablets I get a padding to the right of the screen. When I go even smaller (smartphones) I get an even larger padded area to the right of the screen.
I am unsure if the Panic Button bar at the top may be interfering with the code of the page (.panic-button-container). I have already tried altering the CSS in the media queries. To reduce the size of the white area on tablets I changed the code below concerning the logo and navigation widths.
I changed:
#media (max-width: 1024px) and (min-width: 981px) {
.header-right-panel {
width: 40%;
float: right;
}
}
to:
#media (max-width: 1024px) and (min-width: 981px) {
.header-right-panel {
width: 80%;
float: right;
}
}
This helped a little with the layout but I still get a white bar on smaller screens. The smart phones are the worst. Any possible solutions would be appreciated.
Stop using floats. Use Flexbox. Too many clearfix divs in the way.
Obviously the footer is extending past the site content body as well as some other elements.
If you really want to narrow it down set this style:
* { outline: 1px solid red }
That way you see what container is over-extending and then set it's width to 100% instead of a fixed width.
EDIT 2:
Using my technique I have narrowed down the problems:
.footer-menu
remove width: 500px;
.lp-section-content row
remove all negative margin
.vc_column-inner vc_custom_1548439628787
remove all padding
any help here would be great.
I'm simply trying to place a header that stretches 100% of the screen. Inside this header is another div containing text. What i have looks fine at full screen, but when i resize down the text stacks on top of each other to accommodate the percentage.
If i set the container width to pixels instead of percentage, the header doesn't stretch the full length of the window unless i specify an exact pixel amount like 1463px - this doesn't seem right because while it may be appropriate for my laptop/screen dimensions i feel like it wouldn't work on a bigger screen with a maximized window.
I just want everything in my container to be able to be positioned according to the 100% of the browser width and height, but using percentages isn't allowing me to fix the elements so they stay put during resize. I've been working with percentages mostly and am having great difficulty keeping them fixed on resize as opposed to pixel dimensions, basically because using percentages is ensuring that my content is taking up 100% of the browser window, whereas I can't be sure with this when using pixels.
html, body {
height: 100 % ;
width: 100 % ;
padding: 0;
margin: 0;
}
.container {
width: 100 % ;
height: 100 % ;
margin: 0 auto;
}
#
topbar {
height: 25px;
background - color: #000000;
width: 100%;
}
# topbartext {
font - family: times;
color: #ffffff;
font - size: 11px;
text - align: center;
padding: 5px;
}
The text is what is moving during resize - when I make the window smaller the text just stacks on top of eachother in order to still fit the screen. I don't want it to do this - i just want it to be fixed and not resize.
HTML :
<body>
<div class="container">
<div class="header">
<div id="topbar">
<div id="topbartext">$10 SHIPPING TO THE USA FOR ALL ORDERS OVER $150*++ FREE SHIPPING AND RETURNS ON AUSTRALIAN ORDERS OVER $50* ++ *FULL CONDITIONS
</div>
</div>
</div>
</div>
</body>
Percentages is best for this.
If you want the text to remain in one line you can add the following to your html and css:
html...
<div id="topbartext" class="topbartext">
css...
.topbartext {
white-space: nowrap;
}
Note that:
In css it is better practice to use a class (.topbartext) rather than the id (#topbartext).
Using this method will mean that if you make your page narrower than the text you will have a horizontal scrollbar added (not ideal). You are probably better off allowing the text to wrap in which case you will need to remove the height: 25px;.
As suggested above you could use css media queries. That will take some googling to learn.
If I'm understanding you correctly you can also use a min-width: 820px on the body. This will ensure your body never gets below a certain width it will provide a horizontal scrollbar if it gets smaller than that.
html,body {
min-width: 820px;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
Demo Fiddle
Demo Fiddle Fullscreen
You can use media queries to alter the content styles based on parameters like screen size.
Here's a demo using your example that shrinks the text and allows the #topbar to expand when the screen is smaller than 800px wide (when the text starts to wrap).
For instance:
/* Normal styles that apply all the time*/
p {
font-size:1em;
}
/* Media query that applies if the display media is a screen
and the condition between the brackets is met */
#media screen and (max-width:600px) {
p {
font-size:0.6em;
}
}
You are trying to fit in a lot of text though, you may be better off allowing the surrounding div to expand by removing the fixed height:
#topbar { height:25px; };
If you want to fit all your content on a small screen, this is probably the way to go.
Have you tried using JavaScript? I am not sure what you want since you are setting the top bar container to have fixed height which means the text will be out of the container if you do not resize the height. Here is some script to force the width (or height) to full window size (I had trouble with percentage also):
function resizeTopBar() {
var width = window.innerWidth;
var height = window.innerHeight;
var target = document.getElementById("topbar");
target.style.width = width + "px";
}
window.onresize = function() {
resizeTopBar();
}
The script will not change the way it works (the text will stack on each other) since you never change the height. If you want the height to wrap, remove height: 25px; from topbar.
Screenshot:
You can try this:-
#topbartext {font-size: 1em;}
#media only screen and (min-width: 320px) and (max-width: 479px){
#topbartext{ font-size:25%;}
}
#media screen and (min-width: 480px) and (max-width: 767px){
#topbartext{font-size:50%;}
}
#media only screen and (min-width: 768px) and (max-width: 959px){
#topbartext{ font-size:50%;}
}
#media screen and (min-width: 960px){
#topbartext{ font-size:70%;}
}
#media screen and (min-width: 1280px){
#topbartext{ font-size:100%;}
}
I've been trying to center align these images but they just won't go. I've trying messing around with the sizing and the left-align but nothing works. What do I do?
Here's the JSFiddle: http://jsfiddle.net/4uGtq/embedded/result/
left-align:50%; /* Doesn't work */
#icon-wrapper a {
display: inline-block;
width: 175px;
height: 175px;
}
The width and height are necessary in this case because you have the images absolutely positioned. If you didn't have the width and height, everything would kind of fall in on itself.
When I try your demo (in Chrome) the images are center aligned as a group as long as I don't resize the browser to more than 1300 pixels wide. So given that you have a bunch of #media only screen rules for different max-width and the highest number you go up to is (max-width: 1300px) that behaviour makes sense doesnt it?
Change this line:
#media only screen and (max-width: 1300px) {
to this:
#media only screen and (min-width: 1001px) {
and it should fix it as shown here: http://jsfiddle.net/4uGtq/6/embedded/result/
I'm testing out my CSS at http://flexibletheme.tumblr.com/ and trying to make the website responsive to a small screen size.
Only problem is, I can't get the padding to work on aside element. To reproduce the problem resize your browser window till the sidebar stops floating to the right (this will appear at the bottom, once the screen size is below width of 600px.
All the CSS is inline for now, to view the css. Part relevant to the resizing starts at:
#media screen and (max-width: 600px) {
Edit: This image shows the padding in purple (via Firebug) not displaying properly:
What about the padding isn’t working? Chrome’s web inspector seems to confirm that the padding is there as declared.
I do notice that your <aside> element ends up positioned outside the left edge of your layout, but that’s because it’s floated right and has width: 100%; assigned to it.
from reading your code in Chrome's Inspector, I can see that the following rule is applied when you minimize the screen
#media screen and (max-width: 600px) {
#content {
width: 100%;
}
aside, #title, #menu, .photo img, .asker {
width: 100%;
}
}
This is why you are having the problem. Find your media query in your CSS and sort it out there. :)