Having Trouble With a Responsive Web Page

Having Trouble With a Responsive Web Page
0.0 0

#1

For some reason, the title of my project, the subtitle, and the image are not scaling down as it should. The text below it scales as it should. I am trying to get it to scale along with the background space behind it–the gray space or what I call the .platform. Please advise.

Kanesha Patterson


#2

Hi there!

I just had a glance at your code pen and you have mistakenly include your body tag inside your container. Body tag should include everything! Even your container! Try to change this and rerun your code!


#4

Hello!

Thank you for responding to my inquiry. I’ve made the change to the ‘.container-fluid.’ class, ensuring that it is inside of the body tag. However, I am still receiving the same response via the web page. It’s killing me! Lol.


#5

hi again!

I’ m looking at your code more carefully now and I’m writing down some notes. I get back to you soon!


#6
  • Your title in h1 tag should not be included in p tags. The same applies for the h2 tags. For the latter the customization in css section has unexpectedly large ‘padding-left’ value. This is not convenient in terms of responsiveness. If I have understood right of what you would like to do, then use class “pull-right” (this is a built-in Bootstrap class).

  • for your image you are using the classes “col-md-12 col-xs-8”. I would use exactly the opposite - “col-md-8 col-xs-12”. In that way you have a full-width for small screens avoiding your image to be tiny enough and for medium sized or larger screens you get an image with some empty space right and left. This practice gives some air to your layout and it’s helpful for the user to stay focused. Another thing you can try is to give to your image a css styling property “min-width:180px”

  • for the list in your timeline you can use Bootstrap’s classes to style it better. BUT, before doing this you should erase blockquote tag and the p tag in which you include the ol tag. Include your ol tag in a div. This will improve a lot the layout. :slight_smile:

*A general good practice is to build the sceleton of what you need to present with basic css (or, prefferably at the beginning with not css at all!) and once you have finished then start giving some shape, colours and the style you would like to your elements.

Please let me know if the above work well for you or you need more help.


#7

Thank you for your response. I am still having a few problems when trying to code with these changes.

  * When changing the class of my h2 to pull-right, I do not see a browser change. I did a little
    research on the pull-left & pull-right classes, and read that it only works with the col-lg-*
    columns. Could you tell me more about this?

  * I took advantage of changing the grids to match the suggestions you made above, yet I still do
     not see an effect take place. Same goes for changing the min-width of the image.

I agree with you in full that I should have typed out the code before adjusting the css properties and stylizing the site. I jumped ahead of myself and it’s been a heck of a challenge. Do you think, I should start over with just the basic HTML (words/information for the person I am raising a tribute to?


#8

I don’t think you should start over with basic HTML. What I think it’s best is to see coding in practice and start building things from scratch as you are doing with the tribute page. The first two projects, the tribute page and the portfolio are really good projects to practice your skills and advance your level before you proceed. So, I would suggest to invest more time on the projects rather than working again basic html challenges.

Try to make your code simpler and start again. First delete all the classes you have created and keep only bootstrap’s classes you have already assigned to your elements. Also delete (or comment!) all the styling in tags you have written. This will allow you to get familiar with bootstrap’s classes without worrying about the overlapping effects that your classes probably cause. Then focus on specific bits of your code. Try to simplify them and fix the positions. Once you get them to desired positions then you can start play with their style.

Points on some bits of your code:
For the title and subtitle your code looks like this…

	<body class="background">
	<div class="container-fluid">
		<!-- gray platform -->
				<div class="platform">
					<div class="row">
						<div class="col-md-12 col-xs-8">
							<p>
								<h1 class="assata"><b>Assata Shakur</b></h1>
								<h2 class="subtitle">America's Most Wanted Fugitive</h2>
							</p>
						</div> 
					</div> 

In order to make this bit of code simpler, and based on the points I have written in a previous message, I come up with something like this

<div class="container-fluid">
    <div class="row">
		<div class="col-xs-12 col-md-8">
			<h1 class="text-center"><b>Assata Shakur</b></h1>
        </div>
        <div class="col-xs-12 col-md-8">
			<h2 class="pull-right">America's Most Wanted Fugitive</h2>
        </div>
    </div> <!-- row ends -->

I think this one has the basic structure we would like and we can start doing some styling, which will be left to you. :slight_smile:
Note that ‘pull-right’ should be used in h2 tag.

for the image, your code is something like this…

	<div class="row">
	    <div class="col-md-12 col-xs-8">
			<div class="imgspc">
				<img class="img-responsive image" src="https://goo.gl/mrV1Mg">
					<p class="caption"><em>Picture of Assata earlier in her life.</em></p>
			</div>
		</div>
	</div> <!-- row ends --> 

I have replaced the above with this:

<div class="row">
	<div class="col-xs-12 col-md-8 centered">
		<img class="img-responsive centered" src="https://goo.gl/mrV1Mg">
		<p class="text-center"><em>Picture of Assata earlier in her life.</em></p>
	</div> 

where I have replaced your class ‘caption’ with the ‘text-center’ (the latter is a bootstrap class) and I have written a small class called ‘centered’ and use it where I would like my element to be centered. This class has only two lines of code.
.centered {
margin: 0 auto;
float: none;
}
This is it!
With this you will not have to use min-width…

The other thing I would like to mention is that you should start reading code that is written by others and try to understand what they have created. This is another good practice to learn things fast. You can take a look at the tribute page I made.

some points on codepen. In general, every html code usually starts with

 then you open your html tag, which includes the head and body. In the head you declare your dependencies (links of libraries you intent to use, scripts, some styling etc.) and finally inside the body you write your html code. It seems you already know all these. However, in codepen you don’t have to write a head tag in your html section, since codepen has already included one  with the pen you have opened to write. The html section refers primarily to the body tag and you are ready to start writing your code. You can custom your head if you press ‘Settings’ and there you can include js and css libraries like Bootstrap. The same goes with css section below html. Codepen has already included the file and it saves and sync everything when you press Save.
      

#9

Awesome! Thank you for reviewing my code. I’m taking your advice and starting over with the stylesheets now. Also, for some reason, CodePen requested that I remove the out of the code. It said that it’s text editor doesn’t need to use it.