Currently, I am working on a mobile website and encountering an issue with the image banner.
For tablets, it should look like this:
However, when viewed on mobile, it needs to appear as follows:
This is the code I have implemented so far:
<div class="col-xs-12 topbar">
<div class="row">
<img src="img/bg.png" class="img-responsive" />
</div>
</div>
The height must be fixed at 450px;
Can anyone guide me on achieving this specifically for mobile devices?
The issue lies in the height declaration of your image. By removing the explicit height, the image should scale to fit its container horizontally. This will inevitably decrease the height, as Bootstrap's img-responsive class sets the height to auto.
Alternatively, you can manually adjust the image by removing the img-responsive class and adding a width: 100% property to the image.
Here is an example:
HTML:
<div class="row img-container">
<img src="img/bg.png">
</div>
CSS:
.img-container img {
height: auto;
width: 100%;
}
Take a look at this code snippet that allows you to crop the image and experiment with resizing the result:
@media (max-width: 320px) {
#img_users {
width: 150px;
height: 450px;
position: relative;
}
#img_users:before {
content: '';
position: absolute;
z-index: -1;
background-image: url(http://1.bp.blogspot.com/_KRZSEI76J3c/TU_fMKDHnCI/AAAAAAAAD- s/bbxZFyvTcf4/s400/Coastal_Holiday%252C_Sand_Beach.jpg);
background-position: center;
background-repeat: no-repeat;
}
}
<div class="banner-wrapper">
<img src="http://placekitten.com/g/768/450" class="img-responsive img-banner center-block" />
</div>
CSS
@media (max-width:320px) {
.img-responsive.img-banner {
max-width:none!important;
position:absolute;
top:0;
left:-25%;
max-height:275px;
}
.banner-wrapper {
position:relative;
overflow:hidden;
max-height:275px;
width:100%;
height:275px;
}
}
This is an estimate based on the original image size and position. Adjustment may be necessary.
Currently, Twitter Bootstrap is being utilized on my website and a high-resolution logo has been successfully uploaded. The dimensions of the logo are 529 x 100 pixels, and here is the relevant CSS: .navbar-brand { float: left; padding: 12px 15p ...
After searching and trying various solutions, I am still unable to get the desired output. My goal is to use grids in Bootstrap to set the footer layout with the class "link-footer" positioned at the middle height of the div and the class "footer-copyright ...
Currently implementing the offcanvas component in my project, but I'm looking to make the panel wider than the standard size. Specifically, I want it to be 35% width. I've attempted to utilize the panelClass NgbOffcanvasOptions property, however, ...
Struggling to center text and buttons using flexbox while keeping the columns equal? Setting column height as 100% can be a challenge. If you set the height to 100%, vertical alignment may no longer be centered. Avoid resorting to tables or JavaScript for ...
When I have an HTML anchor element with a tooltip that appears when the mouse is hovered over it, and then I use JavaScript to change the tooltip's text using element.title = "Another Tooltip", the new tooltip text does not immediately update visually ...
Is it possible to use CSS to position the scrollbar of a div that takes up the left half of my page with overflow-y: scroll to be where the page scrollbar would normally be (far right side of the page)? I've experimented with the ::-webkit-scrollbar ...
I am relatively new to Next.js and I am attempting to create a menu with a hover effect using the following code: import Link from 'next/link'; const MenuItem = ({ href, label }) => ( <Link href={href} className="menu-item"> ...
I am trying to pass a dynamic string of data to a Bootstrap modal using the data-val attribute in an HTML table. <td <button type="button" class="btn btn-success btn-xs" data-val="<?php echo $row['order_id']; ?&g ...
Is there a way to create a button that displays text before another text only on hover, with a delay? I've managed to achieve the effect but can't figure out how to slow it down. For example, notice how quickly the word "let's" appears when ...
I have a scenario where I am working with two components named first and second. The second component is calling the first component. Within the first component, there is a module called matslider that toggles on and off. My goal is to retrieve the status ...
I am encountering an issue with my mat chip list in Angular Material. I have a mat chip list filled with mat-chips that I want to display in a single row. If there are more items than can fit on the screen, I would like the area to be scrollable horizonta ...
Currently, I am facing an issue with routing in my project where the home tab remains active even when I click on other tabs. I have tried adding routerLinkActiveOption as a solution, but it doesn't seem to be working for me. <ul class="nav nav-ta ...
I'm struggling to keep my footer at the bottom of all pages on my blog. I am facing two main issues. If I use position:absolute, the footer ends up in the middle of the main blog page. Alternatively, when I don't use it, the footer sticks to the ...
I am currently working on my website which features a search box at the top of every page in white color. I am interested in changing the color of the search box to match the background color of each individual page. Each page has its own unique background ...
I am trying to add a minimum of 50px margin to the top of my footer tag using CSS, but I haven't been successful with the min() function. I'm not sure if I am overlooking something or if there is another correct approach to achieve this. * { ...
Can anyone explain why the input-group in Bootstrap 3.4 is missing all border radius? <form action="{{ route('dashboard.users.index') }}" method="get"> <div class="input-group"> <input type="text" name="search" class="f ...
This is the current setup: The screenshot spans the width of my screen. The image is aligned to the left side, while the Level information section remains fixed to the right of the image. This layout meets my requirements. However, I would like the border ...
Whenever a checkbox is clicked, it updates a display field. I want to capture the content of this display field and also show it in another display field. Ideally, the second field, which is a total field, would add or subtract the value from the first fie ...
Looking for a way to... <core-scaffold id="core_scaffold"> <core-header-panel mode="seamed" id="core_header_panel" navigation flex> <core-toolbar id="core_toolbar"></core-toolbar> <core-menu valueattr="label" ...
I'm excited to ask my first question here as a beginner. I am truly grateful for all the assistance and guidance I have received from this site. I hope that the questions I ask can also benefit others in some way :) Although imagemaps may not be used ...