I have created the following codepane using the react-flickity-component to show case images:
when i resize the browser the margin between the images changes and disappears
no matter what i do next except refreshing the page the margin between the images will be gone
if i add a margin-right:10px to the carousel-cell the the margin doesn't disappear codepan:
but the margin size is not consistent if i resize the browser window:
it can be larger or smaller when i resize the browser into different sizes
any idea on how to solve this issue?
May be late to the party here. Just add margin-right: 10px to your .carousel-cell class in your stylesheet.
You can try padding: 1%, or use % in your margins
Related
I am building one website and I have a weird gap on the right size of the screen.
This gap appears only at mobile view and with portrait view (with landscape everything seems to be OK). Width of body and html is set to 100% with margin and padding set to 0. I figured out that the real width of the body should be 105vw, but is this true for all devices?
Any way how to clearly solve it?
Site: http://valkovic.eu:8080/JanWilliamDrnek/
I could reproduce the first time but not the second maybe you are adjusting as I looked.
it seemed that the logo was pushing out over the body
.title img { margin: 2em auto;} in the css fixed the issue for me.
Unsure about the 105vw unless you are trying to hide something offscreen the max value should be 100vw.
So I'm working on a quick portfolio and in mobile, the "email me" does not expand across the entire screen as it should, as seen on this screenshot.
I've fiddled around with content width, device width, etc. using numbers, percentages, text values, and nothing has worked to make this page perfect. I rewrote the code to be cleaner and still can't find my mistake. Is it just something I'm overlooking?
You can just view my source to get my code, since the CSS should be there.
UPDATE: I removed the navigation padding and changed all of the device-width values but now the navigation bar does not go completely across. I am very confused since the #navigation and #mobilecontact should essentially have the same widths. I'm using Safari on iPhone.
Can you add the browser and version that you are testing on, because Email me button looks fine for me (occupies entire width) in latest chrome - developer tools.
May be your browser didn't understand 100vw
If you are concerned about the clickable area of "email me" anchor text.
You can make the anchor as display:block, so that it takes up entire row
I think you are using mac safari browser and in safari browser "vw" is not supported so now you can use "px" or "%" and button will be expand.
I have checked.. you need to fix following this
First of all you should remove "width=500" from your meta, highlighted in below image.
Add following in your CSS to fix paddings
* {
box-sizing:border-box;
}
Instead of width: device-width use width: 100% and add more properties in #title . see image
Update CSS for #about, #experience, #skills to width:100%
and thats it you all are done.
Here is final result
All you need to do is to fix font-size
When you want to have a responsive design; you don't need to use specific Width for block level elements.
just
remove numerical width from body's children, then add
body,html
{
width:100%;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
and then if you want to set padding or margin to viewport element; the standard way is just one element with specific class handle width like bootstrap container class
So I have managed to achieve the required result.
Basically the extra padding you are adding on <div id="navigation"> (padding-left: 350px) is part of the issue.
Also you are incorrectly using the device-width attribute value. One cannot specify the width of html elements using width=device-width;. Width attribute does not accept device-width as an acceptable value.
So replace that with width=100%; or width=100vw; everywhere you have used it. See here for documentation on responsive web design using viewport meta tag and device-width.
I was able to get the button to occupy 100% of the screen width by making these changes.
Remove padding-left: 350px from <div id="navigation">.
For <div id="title"> and <div id="about"> in the media queries for max-width: 500px, changing width from width: device-width to 100% or 100vw.
Here is the output. Let me know if it works out.
I've looked at many "mysterious white-space at bottom of page" issues here on SO, and played with the viewporttag many times, but I still cannot figure out what I'm doing wrong!
The page in question is: http://www.seniorchoicesunl.com/error_documents/error401.php
Here's what it looks like on mobile from Chrome Dev Tools:
Any Ideas on what I'm doing wrong?
Edit:
setting ANY initial-scale is bad news! It makes the font too tiny!
Take a look:
The desired mobile look, while keeping the desktop and tablets as-is, is this:
P.S. Fixing this issue could reciprocally fix other related issues I'm having with other webpages.
Add this on top of your css file :)
html,body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
it fixed the bug for me.
What's going on here:
You've set width=device-width, this makes the layout size on your page equal to the device's screen width. i.e. making an element 100% will give it the same width as the screen.
Chrome infers the layout height using the width and screen's aspect ratio. i.e. height=width/aspectRatio
The sub_container_div element actually ends up being much wider than the layout width of the page. In my case on a Nexus 6, the device-width is 412px while the sub_container_div is 594px wide.
Since the content is wider than device-width, Chrome allows zooming out and loads the page at the minimum zoom level but this doesn't change the layout width/height so height 100% only fills device-width/aspect ratio pixels, which doesn't fill the zoomed out viewport.
The correct way to fix this is to make sure all your content is contained by the layout size. In your case, the reason the sub_container_div is wider than the layout size is that your padding/margins cause it to expand outside the parent. The solution is to add box-sizing: border-box to the sub_container_div and dialog elements and width: 100% to sub_container_div. That way, Chrome can't zoom out and you can't see outside the layout box (in HTML spec language, that's the initial containing block).
I had the same issue on Chrome 77
I fixed the problem by removing height: 100vh on the body tag.
This seems to fix the problem:
Change <meta name="viewport" content="width=device-width"> to <meta name="viewport" content="width=device-width,initial-scale=1.0">.
Override width: 25em; on .sub_container_div in your mobile CSS so that the container scales with the width of the view.
If you do not want the font to scale, it seems just adding initial-scale=0 will work as well. However, this will make the text very hard to read. You can play around with different scales, but it seems just setting it will fix your issue.
In my case one element was too long for a mobile screen and it broke the webflow. After I shortened the width of the long element, the extra white screen was also removed from the footer.
So here's a project I'm doing for school:
http://graciousevents.co.uk/
The problem is when the browser is re-sized, the photo-gallery moves underneath each other and then the contact DIV gets pushed to the left.
How can I correct this so the contact div doesn't get pushed to the left.
A particular within the DIV selector, if you want strings to re-size with the browser, instead of pixels, use "em".
Ex.
div{
font-size: x em
}
Are you using percentages for the sizing? If you give the window a set size and use pixels when sizing everything should stay where it is when you resize the window.
BEFORE:
width: 10%;
AFTER:
width:500px;
Change CSS using width: 62.5714%;
or
Use Bootstrap CSS
I'm working on this page and I'm having a issue with the DIV where sliders are. This div#home-slider has a height: 350px as you may notice and it works fine for large resolutions but since the page is responsive, when I resize the window or see the page from a tablet or smartphone a white row appears just below the sliders and it's caused by the height value since it doesn't change. Can any give me a solution for change the height or tell me if there is a CSS solution or hack for this? What would yours do in this case?
Have you tried to change the height to 100%?
I would remove the height declaration.