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
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.
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.
A bit of background: I am a student who has volunteered to redesign a website that is used by my extra curricular robotics team. This is my first time creating and working with Bootstrap and responsive design in general and, in my opinion, everything has gone very smoothly up until I uploaded the website to a test domain and viewed it on a mobile device.
The issue I am facing deals with the width of the navbar and content on the website depending on the orientation of the device. While the device is in portrait mode (vertical), the navbar and content don't have enough space in the text, and as a result, make the page extremely long and take up a lot of space. On the other hand, when the device is landscape (on its side), the website is, at least what I would consider, completely fine:
http://imgur.com/gallery/toZYt (album because I cannot post more than two links right now, shows pictures of the issue in greater (visual) detail )
I've experimented with the viewport/initial scale of the webpage, and while that does change the navbar and content width, the navigation bar text/logo is squished in, and also looks relatively low quality. Changing the min/max-width of the media does not seem to do anything. I'm stuck as to how to fix this, and whether or not it is a #media issue or if has to do with my CSS for menu/content. I have a 125px margin for the content in my CSS main CSS, mainly for the desktop site to look nice, so maybe that has to do with something?
I tried to research this problem earlier on other posts and other websites, but I couldn't find anything that seemed to relate to my issue, and any suggestions didn't really fix/affect the website in a major way. I'm hoping that there is someway to fix this without affecting the other forms of the website (Landscape/Desktop), as well as the margin of the text/content.
I found that the problem persists on other phones (tested on a OnePlus X, iPod 5th Generation, and iPhone 6) but haven't been able to test it on tablets. If anyone has any suggestions for me that will solve this issue on the website, It will be greatly appreciated. Thanks for reading!
You need to look into CSS media queries.
There are a couple of things you should fix, including the 125px margin.
For example, that margin is way too big for a mobile device, so what you should do is:
.element {
margin: 0 15px; /* Default margin */
}
#media only screen and (min-width: 1024px) {
.element {
margin: 0 125px; /* Margin for displays > 1024px */
}
}
You can set multiple media queries that affect the same element. To build on the example above, you can have one more query # 1280px:
/* ... */
#media only screen and (min-width: 1024px) {
.element {
margin: 0 125px; /* Margin for displays > 1024px */
}
}
#media only screen and (min-width: 1280px) {
.element {
margin: 0 200px; /* Margin for displays > 1280px */
}
}
A good way to debug layouts at lower resolution is using your browser's built-in responsive view.
You can do that in all major browsers now, for example in Chrome you need to open up dev tools (Ctrl + Shift + I or Cmd + Opt + I) and click on the phone + tablet icon on the top left.
After I took a closer look at your website, I found some fixes you can apply to it in order to make it look better on smaller viewports:
1: (first remove .navbar-brand > img inline style (max-width and margin-top)
.navbar-brand img {
max-width: 200px;
margin-top: 14px;
}
#media only screen and (min-width: 440px) {
.navbar-brand img {
max-width: 350px;
margin-top: 7px;
}
}
2: Adjust border-control padding for smaller screens
.border-control {
padding-left: 15px;
padding-right: 15px;
}
#media only screen and (min-width: 768px) {
.border-control {
padding-left: 125px;
padding-right: 125px;
}
}
If this still doesn't make a lot of sense, I suggest you read up on media queries here and figure out how they work in depth.
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 have a logo with a menu next to it:
This is the HTML:
<div id="logomenuwrapper">
<div id="logo"><img src="img/logo_light.jpg"/></div>
<div id="menu">
<ul>
<li>About</li>
<li class="notfirst">Work</li>
<li class="notfirst">Contact</li>
</ul>
</div>
</div>
This is the CSS:
#logomenuwrapper{overflow:hidden;}
#logo
{
padding-right:1.2%;float:left; max-width:100% !important;
max-height:100% !important;
display:block;
}
#menu{float:left;padding-left:1.2%;font-size:0.875em;border-left:1px solid #ea4a4a;}
#menu ul li.notfirst
{
padding-top:0.3225em;
}
I have added some media queries that will make the menu font smaller when screen gets smaller.
At some point, the menu will be smaller than the logo. What should I add to make the logo scale with the menu? I already added:
img {max-width:100%;}
A picture of how it looks like on smaller screen (as you can see the logo is too big):
Try changing your media queries to something like this:
#media screen and (max-width: 800px) {
body {
font-size: 85%;
}
#logo img {
width:84%;
}
}
#media screen and (max-width: 400px) {
body {
font-size: 75%;
}
#logo img {
width: 75%;
}
}
and #logo to something like this:
#logo {
padding-right:12px;
border-right:1px solid #ea4a4a;
float:left;
}
Working Example
Note: Be sure to put #media screen and (max-width: 800px) above
#media screen and (max-width: 400px) as seen above.
See Why do the order of media queries matter in CSS? for more information on placing media queries in order.
It's admittedly not semantic... but have you looked into scalable text - FITTEXTJS
It uses javascript - but it allows the text to scale as well. You already have a solution to the image - But I see the problem lies in the text itself - Using media queries has you define break points, but doesn't make your text as fluid as YOU need it. I'll edit my post with a fiddle as soon as I come back from the gym, just thought I'd post this thinking it MAY be helpful.
You should set the width of the image wrapper (#logo in your case) inside the mediaqueries to get the image scaled. Or set it globally in percents (see jsfiddle link).
Also add max-width: 100%; for all images.
img { max-width: 100%; }
#logo {
width: 14%;
// remove max-width:100. not needed.
...
}
See http://jsfiddle.net/weP7u/ and resize the browser
I think your going about this the wrong way. Why make the text smaller when the screen is smaller? This probably occurs on a mobile device where you need to make sure you have touch targets that are big enough to reliably click your menu. You could keep the text the same size, and add padding/margin to make the touch target better, but that makes this menu even "bigger" next to the logo.
Instead at the smallest size, try stacking the nav underneath the logo and then once that looks lost as the screen gets bigger, bring the menu up to the right of the logo like you currently have. This neatly gets around doing any text or image scaling, while enhancing your design for small devices.
I put together a demo for you. Be sure to view the full preview so you can resize and see the new menu behavior.
You could use any pattern you want at the smallest size, I went with a simple stacked pattern because your menu easily fits in one row. If you had more navigation items in the future, you could do an accordion or even move to an off-canvas approach.
Further reading:
Check out Chris Coyier's post on making designs tablet friendly, some great tips in there.
Also, check out Trent Walton's short post about type and touch.