New to CSS: Having trouble with responsive design not showing up as expected

I am new to learning CSS. I have a task for my course where I need to style just one page (you can view the tablet mockup here: Mockup-tablet).

However, I'm having trouble with my div elements not displaying correctly. On desktop, one is on the second line instead of inline, and the tablet style is also off, but I can't figure out why. I was advised to use a dedicated div enclosing my elements, but that didn't work either.

You can find my code here: http://codepen.io/anon/pen/dOvbeq

<!DOCTYPE html>
<html>
... (code continues)
...
 
<p>Any help on this issue is greatly appreciated.</p>

<p>Despite trying various suggestions provided in the answers, I made some edits to the row element like this, but the problem persists:</p>

<pre><code>.row {
  width: 100%;
  margin: 0px;
  border: 1px solid black;
}

Could there be another div that needs modification?

htmlcss

Answer №1

It's more efficient to utilize bootstrap rather than manually specifying column percentages. Bootstrap provides predefined values for columns, making it easier to structure your code. Once you integrate bootstrap, you can organize your code like this:

  <div class="row">
    <div class="col-lg-12">
      <div class="col-lg-6"><div class="pinktitle">Chicken....</div>
      <div class="col-lg-6"><div class="redtitle">Beef...</div>
    </div>
    <div class="col-lg-12"><div class="yellowtitle">Sushi...</div>
  </div>

For further information: http://getbootstrap.com/css/#grid

Answer №2

Hey Sophie, here's a quick tip for you: make sure to remove the extra quotes in the div's classes:
instead of 

<div class="col-lg-4" "col-md-6" "col-xs-12">

try using 
<div class="col-lg-4 col-md-6 col-xs-12">

For more information, check out this Jsfiddle example.

Answer №3

It appears that the border around your div, which is 1px in width, has not been factored in. This small discrepancy could be the cause of your content being pushed to the next line.

Answer №4

Pressing enter in an HTML file and adding closing div tags creates a space.

To fix this issue, simply remove the extra line breaks from your HTML code.

Here is an example Fiddle demonstrating the solution: FIDDLE

HTML:

<div class="col-lg-4 col-md-6 col-xs-12"><div class="pinktitle">Chicken</div><p><br/><br/><br/>Incenderat autem audaces usque ad insaniam homines ad haec, quae nefariis egere conatibus, Luscus quidam curator urbis subito visus.</p></div><div class="col-lg-4 col-md-6 col-xs-12"><div class="redtitle">Beef</div><p><br/><br/><br/>Incenderat autem audaces usque ad insaniam homines ad haec, quae nefariis egere conatibus, Luscus quidam curator urbis subito visus.</p></div><div class="col-lg-4 col-md-12 col-xs-12"><div class="yellowtitle">Sushi</div><p><br/><br/><br/>Incenderat autem audaces usque ad insaniam homines ad haec, quae nefariis egere conatibus, Luscus quidam curator urbis subito visus.</p></div>

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

Refresh the webpage source code for an AJAX request

When using AJAX calls on a page, I have noticed that the page source remains unchanged. This can be problematic if a user performs forward/backward operations in their browser, as the browser will display the original HTML code instead of the updated conte ...

javascripthtmlajaxreload

Struggling to make rCarousel function properly due to navigation width and autoscroll issues

I'm having some trouble figuring out what's going wrong with my rCarousel setup. Specifically, I can't seem to get the top part labeled "vrienden van het koksgilde" to work properly. Despite following the instructions on , I'm still no ...

jqueryhtmlcsscarousel

the use of double quotes within the value attribute of an HTML element

I have a variable: <?php $val = 'abc"def\'ad'; ?> My HTML code is as follows: <input type="text" value="<?php echo $val; ?>" name="xyz" /> Unfortunately, the input field does not display all of the text due to the ...

htmlinput

Every time Tailwind compiles, it seems to generate a glitchy class

There was a time when I accidentally wrote 2 classes without a space max-w-[412px]mb-[36px]. This caused an error, so I added a space between the classes. However, the error persisted even after making this correction. In a last attempt to resolve the issu ...

cssreactjsnext.jstailwind-css

Alert classes are not included in bootstrap 5 npm package

In my Angular 13 project, I am utilizing Bootstrap version 5.2.1. While most components are working as expected, the alert component seems to be missing some styling elements. Specifically, I have noticed that alerts with the classes alert-success and aler ...

cssbootstrap-5

Position Bootstrap Modal in the center horizontally

I am working on an Angular project and struggling to center my Bootstrap 3 Modal horizontally on the screen. Despite trying various solutions like using text-align: center and align = "center", I have been unsuccessful. Can someone guide me on how to prope ...

csstwitter-bootstrapangular

What is the best way to adjust the width of a div based on the remaining space in the viewport?

I've created a Wireframe to showcase the concept I'm aiming for. There are 2 screens included to illustrate how the layout should adapt to different screen sizes. Check out the Wireframe here The goal is to have a center-aligned container named ...

htmlcsslayoutflexboxresponsive-design

Creating a vertical triangle pointing to the right as the border of a div element

Currently, I'm working on a mockup that includes the following elements. I am attempting to ensure that the triangular right end of the "Delay Your Payments" div matches the mockup exactly. To achieve this, I aim to use CSS without relying on sliced ...

css

Display data when clicking on Tailwind

I am currently displaying a sub menu on hover using Tailwind CSS. However, I am wondering how I can achieve the exact same functionality by triggering an onclick event instead of hovering over the menu. Here is a DEMO showcasing the current setup. CODE: ...

javascriptcsstailwind-css

Embedding a file in a word document with a hyperlink

We are currently trying to access Word documents on our Intranet site. One of these documents contains an Excel Spreadsheet that we would like to directly link to, but we have been unable to find a solution so far. ...

htmlhyperlinkms-word

Reset the dropdown list back to its initial state

I am facing an issue with two dropdown lists in my view. When I change the value on the first one, it should update the second one accordingly. Initially, this functionality works fine with the script provided below. However, if I change the first dropdown ...

javascriptjqueryhtmlasp.netasp.net-mvc

Add a CSS class to the main document via an iframe

Is there a simple method to apply a CSS class that is specifically defined in the head of an iframe to an element located in the main document? Can this be done without having to resort to using JavaScript to copy the class from the iframe's head to ...

javascriptjquerycssiframe

What steps should I take to integrate my Node.js code into a website successfully?

I have a node.js code that works perfectly in the terminal. How can I display the console.log output on localhost and later on Heroku? Since I am still a beginner, I find express challenging. Do you think I should use it? I also tried Browserify. const p ...

javascripthtmlnode.jsweb

Setting the style in angularjs based on the height of another element once the page has finished loading

Currently, I am facing a challenge with the header element in my angular app. It has a dynamic height that is set only once during initialization. Now, my goal is to place another element, let's call it foo, in the scrollable view of the app in such a ...

javascriptcssangularjs

Unable to retrieve the value from a textarea when using Shopify Product Options by Bold

I'm currently facing an issue trying to retrieve the value of a textarea using Shopify's Product Options by Bold. The code works fine locally, but when I transfer it over to Shopify, I am unable to get the value. Despite looking at various resour ...

javascriptjqueryhtmlshopify

What is the best way to transfer data from an array to an HTML table?

I've been working on implementing the Google Contacts API to display all of my contacts. While following a tutorial, I realized that it didn't cover how to actually showcase the data on my website. Additionally, I am using Google App Engine and P ...

phphtmlcurlmultidimensional-arrayhtml-table

Declare variables for various categories of courses

Currently working with SCSS and have a variable $arial: 'Arial', serif; Now the plan is to implement the following: .english{ $arial: 'Arial', serif; font-family: $arial; } .japan{ $arial: 'Noto Sans'; font-f ...

csssassscss-mixins

Understanding the behavior of CSS float (even after thorough examination of W3C documentation)

I am currently facing an issue related to the float property and have provided a snippet of code below for reference. My goal is to achieve a two-column layout using floats. While I am familiar with other methods to achieve this layout, I am specifically i ...

htmlcsscss-floatw3c

What is the best way to convert CSS to JSS for Material-UI styling?

I need to convert some basic CSS to JSS and include it in the global Styles.js file. The original CSS is as follows: .formdetail { display: grid; grid-row-gap: 10px; grid-template-columns: 1fr 3fr; margin: 20px; } .formdetail .cell { display: ...

cssmaterial-uicreate-react-appjss

How to apply a class on button click using react.js

After spending a few weeks diving into React, I've got the hang of the basic syntax like props and states. However, I'm hitting a roadblock when it comes to connecting certain concepts, especially adding classes when a state changes. My current p ...

javascriptcssreactjs