So here is the removed link
It is in russian but it doesn't matter.
The thing is that bootstrap grid sometimes gets broken and I don't know why. Some times it looks normal but then I zoom page to 75% and it brokes.
I gueess it also brokes on different laptops screens without zooming.
Should I provide you some code or something else?
You can add a CSS clear "reset" every 4 items like this. This will work without setting a specific height.
#media (min-width: 992px) {
.category-wrap:nth-child(4n+1) {
clear: left;
}
}
http://codeply.com/go/ubs5zGee5g
Add height: 150px; to ur .category-wrap to fix it.
.category-wrap {
margin-top: 15px;
height: 150px;
}
Related
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
My current website layout: Screenshot 1
I used a div with a wrap id to center the site:
#wrap {
width: 70%;
margin: 0 auto;
}
but now it obviously also makes it 70% width on mobile which looks bad: SC2
I did try using media queries, the one with max-device-width specified by itself and also the ones that are on the bootstrap website under the CSS section, everytime I used any of those I removed the original #wrap css code, but nothing at all worked, my website would just go to being 100% on all devices and even if I made it 70% on mobile (just as a test) it was still the same everywhere, like there was no css code for the wrap id at all.
Sorry if it's a dumb question, i'm just lost and really want to make my site 100% at a certain (tablet-mobile) breakpoint.
Try this:-
#media (min-width: 768px) {
.mymenu {
width: 20%;
}
}
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.
So, i'm a beginner html/css coder and trying to make a simple site.
Now I have a neat background that behaves perfectly.
But when adding a logo at the top center it looks perfect on the current window size. But when I resize the window, half of the logo is cut off.
My CSS style:
.header-logo {
background: url(images/header-logo.png);
position: relative;
height: 200px;
margin-left:auto;
margin-right:auto;
background-size:cover;
width: 971px;
z-index: 2;
}
I suppose there is an auto scale css/js setting for that but i'm not lucky enough to find it.
All help is appreciated!
Louis
The issue is these two lines of code:
height: 200px;
width:971px;
When you use "px" it's a fixed amount of pixels which means it doesn't change based on screen size. If you use "em" instead then the image will change based on the screen size of the visitor.
Here are two quick references that I hope may be helpful.
http://www.w3schools.com/cssref/css_units.asp
http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
To fix it you might do something like this:
height: 100em;
width:486em;
(Don't use my exact values of course.)
EDIT:
Alternatively it may be good to use a percentage like this:
width: 971px;
max-width:100%
EDIT 2:
It was pointed out to me that you'd probably want to include this line as well:
height:auto;
It happens because your width is setted to be fixed on 971px, you should use width: 100% and set max-width or at least use #media to set your logo width.
using #media:
#media screen and (min-width: 480px) {
.header-logo{
width: 250px;
background-position: center;
}
}
It seems like you want a 971px wide logo and you have an issue when the screen size is less than that because the logo gets cut off.
What you need is a media query like this one and place it at the end of you css
#media (max-width: 971px) {
.header-logo {
width: 100%;
}
}
That way any screen size under 971px will change the width property to 100% of screen size.
You don't need to redeclare all the properties of the class in the media query, it will just change the ones that have to adapt to the new screen size.
Read more on media queries here : https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
I have a website that is totally responsive however there is one part that is not ans is situated below the slogan URBAN FREE SPIRIT (I am talking about the images)
I tried to had the class container, the class img-responsive but nothing seems to work ..
Here is my website, it will be easier to have a look through the inspector I think than with copy paste
http://v1954132.caqoajqezbu9.demo42.volusion.com/
.home-stage-v2 isn't responsive.
.home-stage-v2 {
width: 1000px;
height: 1200px;
position: relative;
margin-top: 25px;
}
Apply media queries for it for the various widths.
#media (min-width: 1200px) {
.home-stage-v2 {
width: 1000px;
}
}
#media (max-width: 1199px) {
.home-stage-v2 {
width: 100%;
}
}
Example above. You will also have to rework the images as they're with fixed width and also don't respond to width changes. I'd suggest reworking them into either percentages or putting them into a grid.
http://getbootstrap.com/examples/grid/ for examples on grids.