I have implemented wp-supersized to create a full-width background that dynamically resizes. You can find more about it here.
Check out what I have done so far at this link.
My challenge is with a fixed height header set at 154px. I want the top of the image to start right after the header, without cutting it off.
It seems like the plugin is using the full height of the browser, but I would like to change that. Any ideas on how I can achieve this?
It's never too late to provide a solution to a problem. I came across a post that didn't work for me initially, but led me to a resolution. You can find the post here.
To implement the solution, start by including this JavaScript code right after the $.supersized call:
$('#supersized li').height($(window).height() - 154);
Next, add the following CSS styles:
#supersized li { top: 154px !important; }
#supersized li img {
width: auto !important;
max-height: 100% !important;
top: 0 !important;
}
For debugging purposes, you can also choose to disable the supersized overlay:
#supersized_overlay { display: none !important; }
Best of luck with your implementation!
#supersized li: To this class, include top: 154px; to match the height of the header. Let's see if this adjustment does the trick.
It seems like the issue has been resolved, but just in case, here is the solution!
Locate your supersized.css file and make the following changes:
#supersized img {
padding-top:154px;
}
As a beginner just starting out with React JS, I'm working on arranging cards in a medium size for my application. I came across a card design that I like and I'm seeking help to achieve something similar. Any assistance would be greatly apprecia ...
My current project involves creating a sketchpad using jQuery for an Odin Project assignment. However, I have encountered an issue with filling the canvas (wrapper div) with pixels (pixel divs). The canvas does not populate correctly. Here is the link to m ...
Take a look at this Plunker, where the animation for adding an item only seems to work properly after an item has been deleted from the list. Any suggestions on how to resolve this issue? Here is the CSS code: .repeat-item.ng-enter, .repeat-item.ng-leave ...
In my React project, I have implemented a Material-UI Table with a fixed header. The issue I am facing is that the scrollbar in the table header overlaps it and I want to hide it while still displaying it in the body of the table. I have attempted to modi ...
I am currently using a template theme that initially had WordPress comments enabled on the website. By implementing the Facebook Comments plugin, I have successfully replaced Wordpress comments with Facebook Comments. **However, there seems to be an issue ...
I have a select option tag with a scrollbar to view the contents in the dropdown. I am looking for a way to automatically position the scroll at the bottom when an item is selected from the dropdown. jquery code $('document').ready(func ...
This is how it appears <img className='imgclass' src={"../" + require(aLc.value)} alt='' key={aLc.value} /> I am trying to create a path like ../m/b/image.jpg, where aLc.value contains the path /m/b/image.jpg. I need to add only ...
Can anyone help me with adding the css background-image:url("xxxxx") property to my code? jQuery('#'+$trackID+' .sc_thumb').attr('src',$thumb_url); jQuery('#'+$trackID+' .sc_container').css('display& ...
I'm looking to have my React app display as if the user has changed the zoom level to 90%. I attempted to tackle this issue using CSS. body { transform: scale(0.9); } However, this method did not result in the screen appearing similar to wh ...
I am currently working with AngularJS and MongoDB. In my MongoDB data, there are some text elements that contain a \n, causing each line to be displayed on a new line based on the occurrence of \n. However, I also want to add line numbers to each ...
Question: How can I ensure the scrollbar is always visible in a browser using JavaScript? I've noticed that some of my web pages have a scrollbar while others do not, causing the page to jump when navigating between them. Is there a way to make t ...
I've been attempting to arrange two blocks side by side within another block, but they just don't seem to fit together smoothly. What could be causing this issue? .container {height: 200px; width: 400px; background:darkgrey;} .left {height: 100% ...
I'm currently working with a DateTimePicker component and I want to customize the color of all the days in the calendar to match the theme color: <DateTimePicker sx={{ "input": { color: "primary.main&quo ...
I have a question about an issue I am facing with my Angular Bootstrap UI implementation. Here is the code snippet: <div class="container" ng-controller='sCtrl'> <tabset id='tabs'> <tab heading="Title1"> ...
<div id="headermain"> <div id="logo"> <a href="#">net</a> </div> Having trouble centering the #logo div within #headermain. Even with margin:auto; applied, the #logo div remains off-center. #headermain i ...
The carousel in Slick is overflowing the container. Expected Result - First Image / Current State, Second Image Parent Container HTML (layout) <main> <div class="layout__main-container p-4"> <app-discover-animals clas ...
I'm currently facing an issue where the image I'm trying to center horizontally also moves the parent div downward when I try to vertically center it using top-margin. This is not the desired outcome. If you'd like to see what I mean, I&apo ...
I'm currently working on designing a responsive splash page that covers most of the page (90vh). The layout includes a logo at the top and a simple paragraph at the bottom. I've experimented with using flex-shrink and flex-basis, but it's n ...
I am currently utilizing the Grid component from material-ui in my React 16.13.0 application. My objective is to create a row with three items. The first two items are supposed to occupy only the required space without specifying pixel values. I want the t ...
I am struggling to grasp the problem and finding it challenging to explain it clearly, so I have attached a picture depicting the issue. https://i.stack.imgur.com/E9Gzj.png My current approach involves using ratios of 100% and 100vw for element widths. D ...