Struggling to override a css element in a responsive design

Here is a Link that I am having trouble with. Within my CSS, I have an element named tbox. It functions as an inline box with a width set at 100%. On the homepage, it adjusts its width perfectly based on its parent and is fully responsive. However, when navigating to the post page, the width changes according to the content inside. Feel free to view some helpful screenshots.

Upon opening the post, this is what I see-

Below is the code snippet for tbox

.tbox{
    display: inline-block;
    width: 100%;
    height: auto;
    padding: 2px;
    background-color: #FFFFFF;
    border-radius: 25px;

}

Adjusting the width to 850px fixes the issue on desktop, but I am running into problems overriding the width in responsive design where it remains at 850px. Is there a way to achieve responsiveness with a fixed width of 850px? Any alternative solutions?

javascriptjqueryhtmlcssblogger

Answer №1

The issue lies in tbox. Make sure to search for .item .post.hentry in your code and update width: 850px; to max-width: 850px;

.item .post.hentry {
    max-width: 850px;
}

Answer №2

If you want to make your design responsive, consider using media queries. It is best practice to place the following code below your main CSS.

.box{
   display: inline-block;
   width: 90%; /* adjust according to your needs */
   height: auto;
   padding: 2px;
   background-color: #FFFFFF;
   border-radius: 25px;
}

Next, add the code snippet below:

@media (max-width:780px) { 
   .box {
     display: inline-block;
     width: 100%; /* adjust according to your needs */
     height: auto;
     padding: 2px;
     background-color: #FFFFFF;
     border-radius: 25px;
   } 
}

Answer №3

Make sure to include the box-sizing attribute within the .tbox class for proper styling:

.tbox {
    display: inline-block;
    width: 100%;
    height: auto;
    padding: 2px;
    background-color: #FFFFFF;
    border-radius: 25px;
    box-sizing: border-box; // this line needs to be added in your main CSS file
}

Answer №4

Make your div responsive by using media queries in this way.

.tbox{
    display: inline-block;
    width: 100%;
    height: auto;
    padding: 2px;
    background-color: #FFFFFF;
    border-radius: 25px;

}

@media(max-width:767px) {
 .tbox{
    display: inline-block;
    width: 90%; //adjust percentage as needed
    height: auto;
    padding: 2px;
    background-color: #FFFFFF;
    border-radius: 25px;

    }
}

@media (max-width:1024px) and (min-width:768px) {
 .tbox{
    display: inline-block;
    width: 100%; //adjust percentage as needed
    height: auto;
    padding: 2px;
    background-color: #FFFFFF;
    border-radius: 25px;

    }
}

@media (max-width:414px) and (min-width:100px) {
 .tbox{
    display: inline-block;
    width: 70%; //adjust percentage as needed
    height: auto;
    padding: 2px;
    background-color: #FFFFFF;
    border-radius: 25px;

    }
}

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

The issue of process.server being undefined in Nuxt.js modules is causing compatibility problems

I've been troubleshooting an issue with a Nuxt.js module that should add a plugin only if process.server is true, but for some reason it's not working as expected. I attempted to debug the problem by logging process.server using a typescript modu ...

javascriptnode.jstypescriptnuxt.js

Extract data from the HTML element on an iPhone device

Currently, I am loading HTML contents into a list in the UILabel. I have successfully managed to remove the tags and append the contents together. However, there are specific instances where the content includes Is it y=2 or x>2,y<1 Hello x = 2,Wor ...

htmliphoneiosobjective-cnsstring

Flashing Dropdown Navigation Bar on Internet Explorer and Firefox

Hey there! I have been working with a drop-down menu on various websites without any issues, but for some reason, it's acting up in this specific application (). The menu seems to flicker and is not properly positioned in Firefox and IE8-10, although ...

jquerycssdrop-down-menunavigation

Node.js accepts JSON data sent via XMLHttpRequest

I have successfully implemented a post method using xmlhttprequest: var xhttp = new XMLHttpRequest() xhttp.onreadystatechange = function () { if (this.readyState === 4 && this.status === 200) { console.log('Request finished. Pro ...

javascriptjsonnode.js

Alternating CSS Designs for Displaying Multiple Mysql Query Results

I have a website where users can search for a specific product in their location, and the site will display a list of results. if(isset($_POST['zip'])){ $qry="SELECT business_id FROM ".TBL_BUSINESS." WHERE zip LIKE '%".$_POST['zip&apos ...

phpmysqlcss

Ways to conceal the jqgrid thumbnail

I have a jqgrid that displays a large amount of dynamic data. I am looking for a way to hide the thumb of the vertical scrollbar in the jqgrid when scrolling using the mousewheel. Here is a basic example: var data = [ [48803, "DSK1", "", "02200220", "O ...

javascriptjqueryasp.net-mvcjqgrid

The Bootstrap navigation menu is functioning properly when opening, but has an issue when attempting

Creating a mirrored version of an HTML file using NuxtJS, I've included the following code snippet in the Navbar component for my NuxtJS project. <template> <section id="navigation-menu" class="menu menu3 cid-sLhoPz7Ycg" ...

javascripthtmlvue.jsbootstrap-4nuxt.js

Customize the background color of a particular select element within an array of dynamically created select elements

I've been experimenting with jQuery to dynamically adjust the background color of a select element based on the chosen option. The select elements are being generated using the following code: while ($qrow = $qquery->fetch(PDO::FETCH_ASSOC)) { ...

phpjqueryhtmlcss

What is the process for uploading files from NextJS directly from the browser to either Cloud Storage or an FTP server?

Is there a way to upload files from the browser using NextJS directly to Cloud Storage or an FTP server? I'm looking to upload files directly from the browser to a storage server. Do you think I can utilize node-ftp in the API routes of Nextjs, like ...

javascriptnode.jsreactjsnext.js

Do not delay, MongoJS function is ready to go!

I have a function set up in my Express JS endpoint that uses 'await' to retrieve data from a Mongo DB using Mongo JS. Function:- async function getIntroducer(company){ const intro = await dbIntro.collection('introducers').findOne({c ...

javascriptexpressmongojs

Design for implementing "new" functionality in JavaScript

I recently delved into the world of JavaScript Patterns through Stoyan Stefanov's book. One pattern that caught my attention involves enforcing the use of the new operator for constructor functions, demonstrated with the following code snippet: funct ...

javascript

Using Jquery to open a dialog box and then utilizing ajax to trigger the opening of

Currently experiencing some difficulties with jQuery and AJAX in trying to open a second dialog box within another dialog box. Below is the jQuery code: $( "#dropdownuser" ).dialog({ autoOpen: false, show: "blind", height : 600, ...

jqueryajaxgrails

Run the setInterval function immediately on the first iteration without any delay

Is there a way to display the value immediately the first time? I want to retrieve the value without delay on the first load and then refresh it in the background. <script> function ajax() { ...

javascriptajax

What is the best way to retrieve the number of rows or count value from an input field using jQuery?

Upon entering a number into the input field, the corresponding number of text boxes will be displayed below. https://i.sstatic.net/fpQRn.png For example, if I enter the number 2, two text boxes will appear. https://i.sstatic.net/xDYAn.png I am looking ...

jquery

eslint alert: The aria-current attribute must have a value that is a single token from the following list: page, step, location, date, time, true

<div role="button" tabIndex="0" className="nav-link pad-0-r" aria-current={'${selectedTab === item ? 'page' : 'false'}'} onClick={()=> onClick(item)} onKeyDown= ...

javascripthtmlreactjsbootstrap-4runtime-error

Modify css with php instead of using FTP

As I work on constructing a website, I wonder how WordPress allows its admin users to edit CSS styles through the website instead of accessing the css file directly via FTP. How exactly does WordPress load the CSS file? My assumption is that it somehow re ...

phpcssftpfwrite

When I use .fadeToggle, my div transitions smoothly between visible and hidden states

Looking to create a sleek navigation menu that showcases a colored square when hovered over? I'm currently experiencing an issue where the squares are not aligning correctly with the items being hovered. Switching the position to absolute would likely ...

javascriptjqueryhtmlcsshover

Bizarre discrepancies in text wrapping across various browsers

After encountering a larger issue, I found that I could reduce it to a simpler scenario: To see the problem in action, check out this jsFiddle link: http://jsfiddle.net/uUGp6/ Here is the simplified HTML code: <div class="box"> <img class=" ...

htmlcssword-wrap

Updating chart.js data seems to be presenting some challenges

Need help fetching data with an AJAX request to update chart.js. The AJAX request is working fine, but the response doesn't update the chart. This is how I fetch the data: <script type="text/javascript"> $(document).ready(function(){ $("#da ...

javascriptjqueryajaxchart.js

How come the JSON output from my CodeIgniter isn't easily understood in JavaScript?

In my CodeIgniter controller, I store data in the 'response' variable like this: { "ok": false, "messages": { "cgusrnm": "<p class=\"text-danger\">The Full Name field is required.<\/p>", "cgnnm": "<p cla ...

phpjqueryjsonajaxcodeigniter