1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

responsiveness not working text is cut

Discussion in 'CSS' started by aretai, Oct 20, 2017.

  1. #1
    Hello,
    SEMrush
    I'm developing a simple website - http://sylviadieta.pl/. I want it to be responsive and almost everything works, except for the contact details text at the top. When I try to resize it to fit mobile devices text is cut and doesn't show up.

    Here is my code:

    <div style="width: 100%; overflow: hidden;">
          <div class="title1" style="width: 700px; float: left;">
             <div class="spaceleft" style="width: 20px; float: left;">
             </div>
             <div class="textleft" style="width: 680px; margin-left: 70px; float: left;">
                <h1><b>Sylwia Majewska</b></h1>
                <h2><b>Specjalista ds. żywienia i dietetyki</b></h2><br>
                <div class="spaceleft1" style="width: 70px; float: left;">
                </div>
                <div class="textleft" style="width: 660px; margin-left: 20px; float: left;">
                   <p><b>„Niech pożywienie będzie lekarstwem, a lekarstwo pożywieniem.”</b></p>
                </div>
                <div class="textleft" style="width: 660px; margin-left: 380px; float: left;">
                   <p><b>Hipokrates (460-370 p.n.e.)</b></p>
                </div>
             </div>
          </div>
          <div class="titleright1" style="margin-left: 720px; margin-right: 70px">
             <i class="fa fa-phone fa-3x" aria-hidden="true"> 501974479</i></br>
             <i class="fa fa-envelope" aria-hidden="true"> dietetyka.syl.via@gmail.com</i></br>
             <i class="fa fa-newspaper-o" aria-hidden="true"> dietetykasylvia.blox.pl/html</i></br>
             <a href="https://www.facebook.com/SylVIA-Zdrowe-Żywienie-i-Dietoterapia-1145519688833739/">Facebook</a>
          </div>
       </div>
    HTML:
    and CSS:

    .title {
      position: absolute;
      top: 30%;
      left: 20%;
      transform: translate(-50%, -50%);
      color: black;
      text-align: left;
    }
    .title1 {
      color: black;
      text-align: left;
    }
    .titleright {
      position: absolute;
      top: 30%;
      left: 80%;
      transform: translate(-50%, -50%);
      color: black;
      text-align: right;
    }
    .titleright1 {
      color: black;
      text-align: right;
    }
    Code (CSS):
    Thank you for your help
     
    aretai, Oct 20, 2017 IP
    SEMrush
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,569
    Likes Received:
    1,529
    Best Answers:
    223
    Trophy Points:
    515
    #2
    Stop using absolute positioning for layout. OF COURSE it's chopped off, elements that are absolute positioned no longer report their width and height to their parent containers -- and therein if the window is too short to show them, they won't show.

    What you are trying to do is why we have floats, flexbox, or the news CSS Grid Layout module. (though you can only use the latter two if you give a flying *** about IE10/earlier)

    It's also usually rubbish to declare positioning in percentages, that's just asking for it to go bits-up face-down; much less you have no media queries so what responsive layout has to do with anything is beyond me!

    But in general your markup is utter and complete gibberish nonsense with the endless pointless <b> for nothing, static style in the markup, presentational classes like "textleft" and "textright" defeating the entire reason to even be using CSS, pixel metric fixed widths.... LAUNDRY LIST of how not to code a website.

    Given what you have there is likely ZERO legitimate reason for that markup to be significantly more than:
    
    <div class="widthWrapper">
    	<div id="top">
    		<h1>
    			Sylwia Majewska<br>
    			<small>Specjalista ds. żywienia i dietetyki</small>
    		</h1>
    		<div>
    			<i>&#xf095;</i> 501974479<br>
    			<i>&#xf0e0;</i> dietetyka.syl.via@gmail.com<br>
    			<i>&#xf1ea;</i> dietetykasylvia.blox.pl/html<br>
    			<a href="https://www.facebook.com/SylVIA-Zdrowe-Żywienie-i-Dietoterapia-1145519688833739/">Facebook</a>
    		</div>
    	<!-- #top --></div>
    	<blockquote>
    		<p>
    			„Niech pożywienie będzie lekarstwem, a lekarstwo pożywieniem.”
    		</p><p>
    			<cite>Hipokrates (460-370 p.n.e.)</cite>
    		</p>
    	</blockquote>
    <!-- .widthWrapper --></div>
    
    Code (markup):
    The outer div would be used to set a maximum width so long lines do not become unwieldy. If I wanted a fixed padding I'd put it on body not slopped into the markup as a pointless "DIV for nothing" like that garbage "spaceLeft" you have. I'm pretty sure your tagline is NOT starting a new subsection of the page, which is what a H2 MEANS, it should likely be part of the main header (aka why we have heading tags) for every page of the site, aka the H1. <small> provides "de-emphasis" as in "would be smaller for grammatical or structural reasons" and not "must be shown smaller". (an aspect of semantic markup lost on many). div#top would be used to contain floats and serve double duty later on if you want to add a <a href="#top">back to top</a> at the bottom of the page. Also provides a wrapping hook so we don't need to piss on the markup inside it with "classes for nothing" as child selectors should handle things just fine.

    You CLEARLY have a quote and citation. Yeah, we have tags for that.

    Assuming a reset is in use, the CSS would be more along these lines:
    
    body {
    	padding:1em;
    	font:normal 100%/150% arial,helvetica,sans-serif;
    }
    
    p {
    	padding-bottom:1em;
    }
    
    .widthWrapper {
    	max-width:60em;
    	margin:0 auto;
    }
    
    #top {
    	overflow:hidden; /* wrap floats */
    	zoom:1; /* trip haslayout, wrap floats legacy IE */
    	padding-bottom:1em;
    	text-align:right;
    	font-style:italic;
    }
    
    #top h1 {
    	float:left;
    	text-align:left;
    	font:normal 200%/120% arial,helvetica,sans-serif;
    }
    
    #top h1 small {
    	display:block; /* removes oddball line-height bug */
    	font:normal 75%/120% arial,helvetica,sans-serif;
    }
    
    #top i {
    	display:inline-block;
    	vertical-align:middle;
    	font:normal 100%/120% FontAwesome;
      text-rendering:auto;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }
    
    #top a {
    	font-style:normal;
    }
    
    blockquote cite {
    	display:block;
    	text-align:right;
    }
    
    @media (max-width:40em) {
    	#top {
    		text-align:center;
    	}
    	#top h1 {
    		float:none;
    		text-align:center;
    		padding-bottom:0.5em;
    	}
    }
    Code (markup):
    Though without the full page content it's hard to dial in the full/proper CSS. Note I swapped to sans-serif fonts since serif fonts cause legibility issues on displays due to the low PPI. (Say it with me, serif is for print, sans is for screen! Serif is for print, sans is for screen!). I also manually used font-awesome because I think their massive pointless set of classes kind-of defeats the point of even using it in the first place! When it is 31k minified, skip that noise and just use the lookup table for the right utf-8 indexes.

    Tossed together it ends up something like this:
    http://www.cutcodedown.com/for_others/aretai/template.html

    As with all my examples the directory:
    http://www.cutcodedown.com/for_others/aretai/

    is unlocked for easy access to the gooey bits and pieces.

    I wasn't 100% certain on the blockquote placement but it didn't seem like something that belonged structurally between the page heading (h1) and the contact info / social media links.

    ... and see the media query? THAT'S what makes a page responsive. Everything else is either elastic design (the use of % fonts and em padding/widths) or semi-fluid layout (the use of a max-width).

    The way the code you presented is built had nothing to do with responsive design.
     
    deathshadow, Oct 21, 2017 IP
  3. aretai

    aretai Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    Thank you for your comprehensive reply. I'll be making changes according to your guidelines
     
    aretai, Oct 30, 2017 IP