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
Related
I am fairly new to coding and need some help. I have a bootstrap website where the slider does not re-size to mobile devices or tablet sizes.
The code in the CSS I have added are:
img{ max-width: 100%;}
iframe{ border: 0; width: 100%;}
and
what am i doing wrong?
.img{
width: ....;
height: ....;
}
#media all and (min-width:900px){
.img{
width:....;
height:....;
}
}
so this is css code. the first .img by itself is what it will look like on a phone for example, the # media tags is what you use to change the size of stuff when the screen size gets above the min-width size. I suggest using firefox as it has a nice responsive view so you can change the screen size to see what it will look like on a smaller screen
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%;
}
}
I want to make a sticky header in my website. I am trying following CSS but when I use the CSS below, My logo gets zoomed out when viewed on a mobile device.
URL of the website : http://gomodemo.se/port73/
CSS
#media only screen and (max-width: 768px){
header{
position: fixed !important;
top: 0px;
}
});
I do not have any issue on the desktop but on a mobile device, the logo gets zoom out.When I click on hamburger menu in the mobile device the logo gets zoom out. Not only logo my header section gets zoom out. Please help me to resolve the issue. Thank you
try this one:
.logo img {
height: 88px;
width: 72%;
}
When styling your logo, be sure to use percentage instead of pixels.
When using pixels, you are setting the position and size of your logo native to your resolution - causing it to look zoomed when viewed from a different resolution (because your mobile device might have a higher resolution). If someone who has a higher resolution views your website, there is an area which you have not covered because of the additional pixels on the resolution.
I advice you to use height value in Percentage.
And don't use important unless you don't have another options.
You can use below code:
#media screen and (min-device-width: 768px) and (max-device-width: 1200px) {
.logo img {
margin-top: -10%;
max-height: 50%;
}
}
I have an issue currently. I'm using a theme in wordpress and I have repositioned the header logo using custom CSS.
The problem is on the mobile version it hides my header image and moves the logo underneath the mobile menu.
Here is what I have for the current normal viewing size:
.header-middle .col-sm-3 {
position: absolute;
width: 100%;
}
.header-middle .col-sm-9 {
width: 100%;
}
.header-middle .header-logo{
position:absolute;
text-align: justify;
width:300px; /* you can use % */
height: auto;
}
I would like that to not work when the mobile version kicks in for lower resolution sizes so then it views normal again.
xeronohosting.com (temp link) also looks fine on normal display but the header background disappears when custom CSS is applied and viewed on a mobile version. So I'd like to keep the header background and logo in same position once on mobile then the mobile menu to be below those 2 sections as it displays before I applied the custom css
I have tried a couple of solutions and non seem to work so any help would be greatly appreciated.
probably (depending on the actual HTML) this will help:
.header-middle .header-logo{
position:absolute;
text-align: justify;
width: 100%;
max-width:300px;
height: auto;
}
That keeps it at or below its parents width (100%) and limits it to not become wider than 300px.
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.