I'm encountering a problem on a website I'm developing: when I re-size the window to an horizontal resolution lower than 1170px both the navbar and the footer create gaps to the right of the page.
This also happens on mobile browsers (when zooming in the navbar shifts to the right making the last objects unreachable).
Could you kindly help me fix this problem?
HTML: http://pastebin.com/nTW3MrEr
CSS: http://pastebin.com/v1TDiK6J
Footer problem (Window Resized, the hero unit/navbar/and content are fine, but the footer still glitches, i've put some text to better understand the problem:
The problem with the website is because of the min-width:1100px set to hero-unit and width:1170px set to div #corpo. Since you are using container class to wrap up your content , in bootstrap responsive css the width is already 1170px so no need to set it there .
Also to rearrange your layout to be properly visible you can write media queries for specific sections of your page.
On your page on tablet view there is a big top margin between navigation and page-header so you can arrange them as belows like:
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
.navbar-fixed-top{
margin-top:5px;
}
.page-header{
margin-top:5px;
}
}
/* Landscape phones and down */
#media (max-width: 480px) {
.navbar-fixed-top{
margin-top:5px;
}
.page-header{
margin-top:5px;
}
}
Related
So I was working on a static website that uses only HTML and CSS. I made the website in desktop view so when screen size is more than 1220px the website will look exactly as I want it to. For selecting services I have a picture as a background and some text inside it. The dimension of picture is 420x469 px. I have a total of 4 pictures and I put them in pairs of 2. So like this (Service 1) (Service 2). I have padding of 7.8% on both left and right side and 8% padding on bottom. Currently if someone access my website from mobile, then service 1 shows with 7.8% left side padding and half cut picture. Then service 2 below it just like Service 1.
What I want is that when someone uses website from phone, they see the picture completely and no padding. and if there is enough space, then some padding pls tell how i can do that
Have a look at these Docs here:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Then you can use CSS like this
.my-class {
/* Mobile - Desktop */
padding: 10px;
}
#media only screen and (min-width: 600px) {
/* Tablet - Desktop */
/* It will overwrite the other less specific classes padding */
.my-class {
padding: 30px;
}
}
<div class="my-class">
<h1>My Content</h1>
</div>
Bonus tip: Don't work with max-width in general, but with min-width. That means you will be working mobile first.
in css add this line it will work perfectly in any screen size
.service1{
width: 100%;
height: auto;
}
Define a #media query specifically for 'phones' like this :
#media (max-width: 640px) { /*...*/ }
You may want to remove the padding/margin for any smaller screen sizes. Try like this:
#media (max-width: 978px) {
.container {
padding:0;
margin:0;
}
}
Otherwise, Try using bootstrap it works very well in Adjusting margin/padding with screen size.
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
what i am trying to do is here example is in fiddle
I have .carousel-inner{min-widt=500px;} for large screen size (I want it responsive though)
Now my problem is i want first carousel slider image to be at center-left position of my carousel from top and bottom. and caption is on right side center and viz.
I have tried this code... but when i go on smaller devices the images goes on the caption.
https://jsfiddle.net/xe05ro61/4/
You can add just width:100%; of your image, i think then after your problem is solved.
Try below css:
Css:
.item img {
width: 100%;
}
See Fiddle Demo Link
You will often need to use specific css rules for the small screen, to adapt your website to any browser size.
To achieve such a thing, the common way is to use #media .
To define a css rule that will target only screen with width under 640 px, use :
.myclass{
background:red;
}
#media screen and (max-width: 640px) {
.myclass{
background:green;
}
}
On PC screen, you will get a red background, on small mobile screen, a green one.
Now, replace these useless color definition by your position rules.
Hello I am trying to create a responsive layout. I want the buttons I have created to be fit somewhere on the left side. But when I load it on my mobile phone (sideways) it does not show all the buttons as I cannot scroll down. I don't want to have to scroll down. Can I make the size and/or spacing of the buttons dependent on the screen size?
Thank you!
http://farah-sean.samanthaongphoto.com/index2.html
For responsiveness you can use 2 methods.
Or you base your CSS style based on percent and your layout will fit on the size screen, or you can define CSS rules based on screen size with CSS property #media
See exemple bellow from W3C #media
#media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
Defining various #media for different screen size will make your layout responsive.
I have a (rather simple) website that I wish to automatically scale and adjust such that the main content area fits in the screen without horizontal scrolling on iPad. On Landscape mode it works fine, however on portrait mode it leaves out part of it on the side, and the user has to scroll horizontally.
It normally works fine for other websites I did, but for this one I can't understand what is stopping Safari from doing this.
I added the following line at the top of the HTML but it doesn't seem to have any effect (I tried various alternatives like adding the initial-scale=1.0 etc. too)
<meta name="viewport" content="width=device-width, maximum-scale=1.0" />
What could be the reason this is not working?
Clarification
I am not looking for a media query solution. I am just trying to understand why for some sites the iPad (and other touch devices) automatically scale down a website to fit on screen, while in this case something is causing it not to. I am just trying to identify the reason for it.
there is fixed width given for inner container
div#branding{
width: 1024px;
}
#content{
width: 1024px;
}
div#footer{
width: 1024px;
}
change all the 3 width to 100% for #media screen
more information on #media screens can be found here
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {
div#branding {
width: 100%;
}
#content {
width: 100%;
}
div#footer {
height: 40px; /* remove height */
display: inline-block; /* change display:block to display: inline-block; */
}
}
and it will work
the right side footer content will come down as the left side content is more
screenshot
note : your footer will broke as fixed height is given you can remove it
for fixing your footer change css for footer
div#footer {
height: 40px; /* remove height */
display: inline-block; /* change display:block to display: inline-block; */
}
screenshot
I used width:100% and it solves my orientation layout situations, but there seems to be media queries that can help too:
#media screen and (orientation:portrait) {
/* Portrait styles */
}
/* Landscape */
#media screen and (orientation:landscape) {
/* Landscape styles */
}
Check this site out for more: http://www.1stwebdesigner.com/css/how-to-use-css3-orientation-media-queries/
Let us know if it works out.
Depending on rules you got in your CSS you will need to assign portrait mode such as landscape or portrait and add desired width also.
#media screen and (orientation:landscape) and (max-width:1024px){
some rules that will be applied to iPad in landscape mode
}
And big big difference is this, which will be applied on all 1024px screens
#media screen and (max-width: 1024px){
some css rules for "normal" screens on max-width: 1024px
}
EDIT:
So make sure that you put your "container" divs on 100% in various modes and adjust all other elements. the scrollbar you got is actually DOM element with fixed div or margins and paddings that affect width of whole page
I think the meta tag has a minimum scale besides the maximum:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
What I don't know is if it will make any difference at this point.
It should work in theory, along with:
#media only screen and (min-width: 480px) {
/* landscape */
}
#media only screen and (max-width: 479px) {
/* portrait */
}
I finally figured out the problem. iPad (and most touch devices) actually scale the website automatically, without the need of the <meta name="viewport" ... > if the website is not explicitly designed to be responsive.
However, this scaling does not seem to work when the website is too wide. My content was 1024px wide, which for some reason was triggering the devices to turn off scaling.
I changed the content's width to 960px (I don't know the actual threshold, but my other site that scales well had this width) and the issue was immediately fixed.
Adding this answer in case someone is looking for a reason why scaling is not working on his site.
Obviously this is not related to having a responsive site, this is just when the website is simple and scaling is enough.
What I'm noticing is that Safari by default scales the web page automatically. However if the user manually applies some scaling - Safari stops its automatic scaling.
In my case this was the reason why it scaled some sites and others don't.