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.
Related
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'm creating a website and it's not fully response - I accept it.
I want to set minimum width for overall page to something like 1000px and display horizontal scrollbar if screen width is below this. I tried to use:
#media (max-width: 1000px) {
body {
min-width: 1000px !important;
}
}
But it's not working, scrollbar appears but my DIVs getting messed. I'm using Bootstrap 4 with sass, is there any way to force this behavior?
Of course, I'll create fully responsive site later, but now I want to archieve this for mobile and tablets. Currently, my navbar under 1000px is totally broken.
EDIT: Example codepen with my navbar code, under 992px it gets broken: https://codepen.io/anon/pen/vJgGma
The elements in your nav always hit 100% width below 992px so they're going to wrap no matter what you do.
You need to define widths for your nav elements below 992 if you want it to stay at 1000px wide. Try setting them to percentages that equal 100% and you should be fine.
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 :)
I am building a site that uses a very large header image. When the site is viewed on mobile I would like to scale that header div's height to be half of what is is on desktop.
What is the best way to do this with bootstrap 3?
A simple media query will work:
#media all and (max-width: 480px) { // or whatever size you want to target
// change header size
}
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!