Header Stretch: (1) will maintain its original size on iPhone devices (2) ways to define maximum width for desktop view

I'm currently tackling a challenge with a CSS tumblr theme header that can be found at grandneue.tumblr.com.

(1) Stretch: I need the header to have the capability to stretch, but only up to a maximum size of around 800px as it becomes too pixelated beyond that.

(2) Shrink: Another issue I'm facing is that while the header does shrink to a certain extent (when adjusting the desktop browser window and on an iPhone5), it doesn't shrink fully to fit 100% on a vertical display in an iPhone5 browser.

Can anyone lend a hand in solving these two dilemmas? The content is fine, so it's puzzling why the header isn't cooperating!

iphonecssheaderstretch

Answer №1

It appears that the issue lies with the image, as there seems to be a significant amount of white space surrounding the logo. To rectify this, adjust the header image to have a width of 800px and ensure that the logo fits snugly against the edges. Next, modify the background properties for.header-image.cover as follows:

.header-image.cover{
-webkit-background-size: 100%;
-moz-background-size: 100%;
background-size: 100%;
margin: 0 -1px;
}

Lastly, update the container div.header-image-wrapper like so:

.header-image-wrapper{
max-width: 800px;
}

If the image extends to the edges on mobile devices, simply apply padding to the container using a media query.

I hope this guidance proves beneficial!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Arrange containers into a tower?

Currently, I am exploring the concept of stacking boxes. While I have a solid grasp on how to stack them vertically from top to bottom, I find myself puzzled about how to stack them horizontally. Check out my vertical stacking method here See how I a ...

htmlcss

Positioning a div element within an H2 heading

I am facing a problem where I need to insert a div inside an H2 Tag. Do you think it's possible? I believe it should be, but I am unsure of how to accomplish it. Here is what I have attempted: HTML <h2 id="strap">Blah Blah & Some More Bla ...

htmlcss

parameterized selector incorporation

My goal is to send a unique identifier along with my button click so that I can determine which button was pressed. All of my buttons are dynamically generated and trigger the same function, but I need to know which specific button was clicked in order to ...

iphoneobjective-ciosipadmapkit

Is there a bug with Edge 40/15 opacity and visibility transition causing flickering during event propagation?

Previous versions of Edge displayed the correct transition effect. I am animating a div by adjusting opacity and visibility using CSS when its parent's hover event is triggered. //LESS &:hover .inside{ //part that matters: visibility: visible ...

htmlcsslesscss-transitionsmicrosoft-edge

How to place a Div element in the middle of a webpage

My webpage background features an image of old Tbilisi, and here is the code I am using: <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <style> #links { margin: 0 auto; ...

csshtml

Creating a CSS layout with tabs that include a visually appealing right space

My webpage is set up for tabbed browsing, with the tabs displayed as <li>s in block form. The parent div containing the tabs is floated to the right. However, I am encountering an issue where the last tab is not fully aligning with the right side of ...

css

The dominance of the !important CSS property and inline styles getting overridden

While using Bulma to design a website, I encountered an unusual issue with the Tabs component within a Hero component. The Tabs element comes with a default margin-bottom of 1.5rem, which does not align with my desired aesthetics. Despite trying differen ...

htmlcsscss-specificitybulma

When a child SPAN surpasses the height of the parent TD/TABLE, trim it down

I am attempting to make my outer table/td clip the inner SPAN when the content of the span exceeds the height of the outer table, all while maintaining vertical and center alignment. Instead of the current layout: https://i.sstatic.net/s33q7.png I want ...

htmlcss

Should I use CSS, Bootstrap, or a combination of both for a complicated design in a React app

I am currently developing a react app and utilizing react-bootstrap to incorporate various components. As someone who is new to javascript, react, and web development as a whole, I find it challenging at times. My goal was to create a layout that seemed q ...

cssreactjsreact-bootstrap

Only the first column of a row in Flexbox will have a line break when exceeding the

Currently, I am utilizing flex with a row direction for a set of items with fixed widths causing overflow and a horizontal scrollbar, which is the desired outcome. Nevertheless, my requirement is for the first column in these rows to be full-width, while ...

javascriptcssflexboxcss-gridflexboxgrid

Chrome working fine but Firefox having issues with dropdown

My header dropdown works smoothly in Chrome, but I encounter issues with Firefox. Although the dropdown appears when clicked, I am unable to interact with the forms inside. Furthermore, clicking on the dropdown causes it to close immediately. HTML <d ...

htmlcss

Is there a more efficient approach to styling with CSS?

Here is the CSS I am currently using: .navbar-inverse .nav > li > youtube-dialog > a { color: #999999; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); padding: 10px 15px 10px; display: block; text-decoration: none; /*underline*/ } ...

htmlcss

Incorporate media from one section of my site onto a different webpage while ensuring it is responsive

I am attempting to extract the server list div #content from this URL on our website: My goal is to then embed it onto a different page within our domain: The problem: I have successfully embedded it using an <iframe>, but the server list's re ...

phpjqueryhtmlcss

What is the method for placing a badge above a Font Awesome icon?

Is it possible to add a badge with numbers like 5, 10, or 100 on top of the Font Awesome symbol (fa-envelope)? I am looking for something like this: However, I am struggling to figure out how to place the badge on top of the symbol. You can see my attempt ...

cssfont-awesomebadge

The issue of a malfunctioning Customized Bootstrap Carousel when used with flex and gap is causing

I have created a unique bootstrap carousel where instead of displaying one div, I showcase three (one in the middle and half of each on the sides). The issue arises when I add borders to my divs and attempt to create spacing between them using display: fle ...

csssassbootstrap-5

Implementing conditional logic to import various header files based on specific conditions

I have two header files, let's say a.h and b.h. Depending on certain conditions, I need to import them into myClass.m. If condition A is met, then I must import a.h. If condition B is met, then I must import b.h. Since a.h and b.h contain many ident ...

iosfileheader

Over time, a buildup of code can gradually impair the speed of the

Currently, I am in the process of working on a project for my Web Programming course at University. The homepage is almost complete, but during testing, I noticed that each time the scroll event is triggered, there is a significant slowdown. This particul ...

javascriptjqueryhtmlcssreactjs

The div remains unchanged when the button is clicked

My webpage is filled with several large div elements. There's a button on the page that, when clicked, should switch to the next div. Despite my efforts, the code I've written doesn't seem to be working as expected. :( This is the HTML st ...

javascriptjquerycsshtml

CSS3 Animation for Marquee Image

I'm struggling to create a CSS3 animation for an image. My goal is to have the image continuously wrap around and scroll across the page, but I can't get it to work as intended. Here's a simple snippet of my HTML: <div id="space" class=" ...

htmlcssmarquee

"Discover the secrets to creating a stunning layout with the help of bootstrap's responsive

Here's what I have accomplished so far: <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anony ...

jqueryhtmlcssbootstrap-4