I have a couple of issues with my CSS, I am currently using W3.CSS library to build a basic responsive website, I have media queries for small devices and for some reason it works on my phone but not on my computer when I resize to the small size, it used to work on the old version of the site but not anymore.
The second issue is very recent, in fact it's today; For some reason the website does not work on a different 'iPhone'.. My explanation is probably because it is a different iOS version? as that 'iPhone' is iOS10.3 and my phone is on iOS10.1.1
In conclusion, I just would like to add, should I change the library to Bootstrap or is W3.CSS good enough? Sorry if I come out as a bit naive but I am new to responsive design.
Homepage code example:
.main-div{ //main div is supposed to be the main content box
max-width: 75%;
width: 100%;
}
.sidebar-div{ //sidebar div is supposed to be the sidebar content box
max-width: 24%;
width: 100%;
}
/* responsive css */
/* mobile portrait&landscape */
#media screen and(max-width: 768px){
.main-div, .sidebar-div{
max-width: 100%;
}
}
Related
I'm looking to add black padding/margins to my long-form sales page.
example of black margins.
Looks great when I enter the following code into the head when viewing on desktop.
However, when I take a look on any mobile, its just awful - margins from the code are applied to the mobile version so it looks scrunched up into a barely-legible web page.
How can I make these margins appear on desktop view and not affect the mobile appearance?
Not so keen with any of this, and tried the lazy-man's approach by inserting this into just the html head...will this take some CSS coding?
Thanks.
<style>
html {
background-color: black;
}
body {
margin:75px;
margin-top:0px;
background-color: white;
}
</style>
You're looking for what are known as media queries. These allow you to write CSS rules which only target specific viewports, and are denoted by #media.
If you want your code to only apply for desktops, you can use somethjing like the following:
#media screen and (min-width: 768px) {
html {
background-color: black;
}
body {
margin: 75px;
margin-top: 0px;
background-color: white;
}
}
The above will only apply your rules to viewports that are 768px wide or wider (which covers tablets, laptops and desktops). If you want a more finely-tuned media query, you can check out CSSTricks' article on media queries for standard devices. A fairly comprehensive list of device viewport sizes can be found here.
Note that you can make use of multiple media queries for multiple different viewports, and if you're using a responsive framework like Bootstrap, Skeleton or Toast, then several media queries will be baked in by default.
So first I am doing freecodecamp and this is my Pen I am working on https://codepen.io/chrisalta94/pen/JwdBEq
As you can see the image and the space around it is too big, how can I reduce the size so it will look better, and if anyone knows how can I make it responsive?
CSS
#header-img {
display: flex;
height: 100%;
background:black;
}
img {
max-width: 100%;
max-height: 100vh;
margin: auto;
}
You need to add a height attribute to your tag.
For example:
<img src="https://i.pinimg.com/originals/73/fb/7f/73fb7fb7b9cd1833e16bb4fcef17a962.png"
alt="Adidas Logo" height="200">
This way you can choose a particular height that works for you.
As for making it responsive, this is usually done by setting several media queries at different widths, that change the design when it breaks down. So this usually includes a lot of experimenting with when the design starts to break down.
Alternatively, what I often find just as effective and much simpler, is using the orientation: portrait media query, like so:
#media (orientation: portrait) {
/* CSS that needs to change here */
}
This will change the specific CSS on every viewport in portrait orientation. This includes phones and tablets for example, but also desktop browsers windows that are resized to a portrait orientation!
My website is hosted on blogger.com but I uploaded a completely custom theme and have adjusted the code to change the design a bit. The theme is mobile friendly except that my actual blog posts text is only showing half the page on mobile devices. It's as if the page is cut in half so half the sentence isn't showing. Even if you attempt to zoom out. Its just showing the desktop view on mobile without scaling so only half is visible. Everything else works perfect on the mobile website. I'm lost with how to fix this...thinking of adding meta tags to the head for each mobile device? I tried to add
<meta name="viewport" content="width=device-width, initial-scale=1">
but it didn't work. Basically, I need to change it so it automatically scales blog posts for different mobile devices.
CSS for my blog post font and page width has been specified
#test{
width: 680px;
margin: 0 auto;
text-align: left;
font-size: 15px;
line-height: 24px;
letter-spacing: -0.01em;
}
HTML
<div id="test">BLOG TEXT</div>`
Wondering if there is an easier solution?
Cheers,
Here's one thing you can try:
#test {
width: 680px; /* your main container */
margin: 0 auto; /* centering it */
max-width: 100%; /* don't let the container be bigger than the body! */
/* ... the rest of your css... */
}
That way, if the viewport is smaller than 680px (most cell phones are), your content won't overflow. If that doesn't work, you might consider posting a link to your blog here so we can see the full context of what's going on.
I'm a newbie when it comes to coding (this is my first website) but I'm trying to modify the logo on my website. I would like to make it bigger and central. I am able to achieve this from the desktop view but it doesn't work on the mobile.
Briefly, the logo looks quite small on both devices, desktop and smartphone. So I add this code in Custom CSS (found on the web...):
.logo.logo1 {
width:100%;
text-align:center;
margin-bottom:20px;
}
.logo.logo1 {
width: 400px;
height: 100px;
}
.logo.logo1 {
position: relative;
top: 40px;
right: 130px;
}
With this in place, on my desktop the logo looks nice but on my smartphone it is small and goes too far to the very left of the screen, partially disappearing.
As I'm now approaching to coding, I have no idea whether it depends on a potential logo container or how to make it responsive on the smartphone. Truth is that the more research I do, the more I get confused.
Any help about how to fix this would be very appreciated :)
P.S. the website is this one
Gio
Add this to your css at the bottom.
#media (max-width: 767px){
.logo.logo1{
max-width: 100%;
width: 100%;
position: static;
top: 0;
right: 0;
height: auto;
}
}
Basically, what's going on here is that you are overriding a bunch of styles that your theme applies that make it tiny on small devices.
you should change css in media section for mobile view. use somethings like below :
#media (max-width: 767px){
/*
your css tags
*/
}
special in this issue you should change style-mb.css file in line 3048 and change your logo size
note: you can use mobile view in your browser to test mobile view in your desktop browser in developer tools
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.