I am new to bootstrap.I have a logo image(instead of project name) and a horizontal navigation bar on top of my page.Logo image is on the left side.When browser window is reduced navigation bar shrinks.
I have 2 problems:
(a)The menu that comes as drop down(when window size is reduced) overlaps the content area
(b)Menu comes below the logo image.The logo image is about 160px.(I think i may have to reduce the logo image size when window size is reduced).Can anyone tel me how to reduce image size or any other method to solve this!!
If reducing the image size in steps is going to solve your problem, then you could use media queries in your CSS to achieve this. For example-
#media all and (max-width: 480px) {
/* Reduce image size */
}
For a detailed description of media queries, check http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ or http://webdesignerwall.com/tutorials/css3-media-queries
Related
I'm working on a Wordpress site where I have a background image that serves as my logo and my actual header image is transparent. Due to the way the header image resizes on mobile, there is a big empty space between my logo (the background image) and everything below it when viewed on a phone. It looks great on desktop & a tablet.
Is there a way that I can resize the height of that transparent header image only on a phone, without messing up the size of it on desktop or tablet?
You can view my site here, if needed.
Would be easier to show in actual code but you can adjust the sizes and only make it impact the sizes you define with media queries - read more about here
If you look at the screenshot, you can see that the a tag had a height of 150px. If you regulate it a bit, the space between logo and menu won't be as far.
Here is an example that will make the new change of height on the .header-image .site-title a only on sizes less that 450px.
#media screen and (max-width: 450px) {
.header-image .site-title a {
height: 100px;
}
}
max-width means when ever the screen is under 450px, min-width would be over.
This was just an example, you can change it to whatever you prefer and you can of course add multiple media queries.
Site URL: http://www.digisalud.org/desarrollo/dona/
Hello!
Please, I am using DIVI Theme and I need to make these settings in the navigation bar:
NAVIGATION BAR:
The PLATFORM button on some laptop screens is shown on the down line of the navigation in screen with size between 1056 and 1346 px.
When you place the cursor on the DONA button or on the PLATFORM button near its corners, the text is shown in white, this should appear in yellow or blue.
I show you the images with the sample of each problem. This site is already in production and I need to close these details with the client. I appreciate the help very much.
Regards
Adriana
At 1280px, for example, there isn't space enough to put all the elements into the same row.
If you inspect all the element's width, you'll see that the menu container must have, at least, 1030px of width to keep all the elements inline.
Obviously, like your menu container width is setted to 80%, when the screens size is, for example, of 1280px, the menu container have a width of 1024px (that, like I said, is not enough).
One solution can be to force the container to cover the entire width in those resolutions.
You can approach this using media queries.
Something like this:
#media(min-width: 1024px) and (max-width: 1366px) {
.container.et_menu_container {
width: 100%;
}
}
Snapshot with the Plataforma button hovered:
P.S: You can also adjust the paddings/margins of the menu elements (logo, menu items, buttons...)
I am creating a menu bar with w3-css. The menu bar should be fixed to the top.
Here is an example, please try to decrease screen width:
https://www.w3schools.com/code/tryit.asp?filename=FEZ9Z1BYNTEX
The problem is, when screen width is set to narrow, and the menu wraps into more than one lines, it covers the first lines of text. Is there a way to solve it somehow?
You can solve this issue by using a media query. Media queries allow you to apply CSS to a site at a certain screen size. For example:
#media (max-width: 650px) {
.w3-container {
padding-top: 40px;
}
}
This CSS pushes the container down at smaller screen sizes so that the menu will never cover up the text below it. Alternatively you could use a media query to make the menu text smaller or hide certain parts of your menu when it gets to smaller sizes.
Most people switch to another form of menu for mobile devices such as a Hamburger menu. This isnt needed to fix the problem you are currently facing but you might want to look into it for your future projects.
Set .w3-top to position sticky instead of fixed. Then remove margin-top from the body.
https://www.w3schools.com/code/tryit.asp?filename=FOC96ENPLRNO
I have a large background image that is a specific height and width which I'm happy with for desktop. I'm using background position centre top atm, so I can see the entire image but width is cropped as browser width is reduced.
There is a specific central part of the image that is the focus, so once I reach a specific browser width (around 1000px - where the image is cropped on the width), I'd then like that viewable area of the image to respond down to mobile retaining the visible cropped width that the browser has dictated... is this possible?
Many thanks
I dont know what you exactly mean but I think that you want to use a media screen.
#media screen and (max-width:1000px) {
img{
width:100%;
}
}
Reply on the post if you mean something else I will help you out :)
preamble:
I am using a somewhat responsive theme (skeleton).
it changes the layout to a single column for small screen sizes,
my problem is:
my header image (that i inserted using the theme options in the admin panel) is not scaling when the screen is resized. it remains at 940x150 all the time.
when viewed on mobile this is causing a full sized header with content in a single column on the left, so im left with all kinds of whitespace.
I would like to: cause the image to scale down with the screen width
OR
replace the header image with one meant to fit smaller screen sizes.
the problem with option 2 is not all devices have the same screen width so it still needs to be scaleable to a point.
Ideally:
when above the below stated width, the image will scale to fit the screen between the 700-something (ipad landscape) and the 940 standard.
when below a certain screen width (say below tablet/ipad size, so 700-something max-width), the image is swapped for the smaller one, which then scales up or down between 300 and 700-something (just below the ipad size).
in this way the image would always be a decent size for the rendering of the site.
the problem with this particular image is the amount of whitespace (empty space) in the middle.
below a certain width, i would think the elements of the image would become artifacted and messy with so much space between them.
the site:
porthuronairportshuttle.com
Add this to your css:
img {
height: auto;
max-width: 100%;
}
I figured it out. It was actually a matter of removing the header I uploaded with theme options and uploading it with wp core functions. Then I moved the nav bar in the header.php and after some tweaks with margins and padding - poof!