bigger font size in dreamweaver

  • (2 Pages)
  • +
  • 1
  • 2

24 Replies - 715 Views - Last Post: 23 July 2019 - 11:27 AM

#16 Maxx5   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 227
  • Joined: 15-September 15

Re: bigger font size in dreamweaver

Posted 13 July 2019 - 05:33 PM

I shrunk the browser and I see where my header goes. If I make the image smaller. will that not screw things up for looking at it on a computer?
Was This Post Helpful? 0
  • +
  • -

#17 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15226
  • View blog
  • Posts: 60,944
  • Joined: 12-June 08

Re: bigger font size in dreamweaver

Posted 13 July 2019 - 06:48 PM

Again, you probably added some responsive css code when writing this. It would be sensible that should know that.
Was This Post Helpful? 0
  • +
  • -

#18 Maxx5   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 227
  • Joined: 15-September 15

Re: bigger font size in dreamweaver

Posted 22 July 2019 - 02:21 PM

I'm trying to get my image to spread across the screen when viewing on a Iphone but it won't. I've tried everything. I get close to solving it. then it messes up something else.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/screen.css">
  <link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">
  <title>Home - 1 Finger Trigger Photographer</title>
</head>
  <body>
    <div class="wrap">

      <div class="header">
        <div class="logo"></div>
</div><!--Header Ends -->

      <ul class="menu">
        <li><a href="index.html" class="current">Home</a></li>
        <li><a href="https://1fingertriggerphotographer.myportfolio.com/" target="_blank">Photography</a></li>
        <li><a href="speaker.html">Speaker</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul><!-- Menu Ends -->

      <div class="main home">
        
        
          <h1 class="quote" align="center">“Our abilities or inabilities,<br> we all have challenges”  </h1>
        </div><!-- .Main Content Ends -->

      <div id="footer">
        <p> &copy; 2018 1 Finger Trigger Photographer. Division of Charisma Communications All rights reserved</p>
      </div>

    </div><!-- Wrap Ends -->
  </body>
</html>


body {
  background: #ffffff;
  font: 100%/1.2 tahoma, helvetica, sans-serif;
}

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.wrap {
  border: 1px solid black;
  border-radius: 20px;
  max-width: 70em;
  margin: 0 auto;
}
#footer {
  text-align: center;
  border-top: 1px solid #000;
}
img { /* this targets all images on the site!, could cause issues later on*/
  border-radius: 19px;
  display: block;
  width: 100%;
  height: auto;
}

/*--- Header Styles ---*/
.header {
  display: flex;
  flex-flow: row nowrap;
  border-radius: 20px 20px 0 0;
  width: 100%;
  height: auto;	
}
  .logo {
    width: 100%;
    height:460px;
    border-radius: 19px  19px 0 0;
    background: url(../images/logo.jpg);
    background-repeat:no-repeat;
    background-position:center;
    background-size: contain;
  }
   
    h1 span {
      display: table; /*shrinkwrap text*/
      margin-left: auto;/*push it to the right*/
    }
    h1 span:nth-of-type(1) {
      font-size: 1.4em;
      font-family: 'Kaushan Script', cursive;
      font-weight: 500;
    }
   h1 span:nth-of-type(2) {
    margin: .33em 0 .5em auto; /* added .5em bottom margin*/
    font-size: .75em;
    font-family: tahoma;
    font-weight: 500;
}
h1#quote {
font-size: 0.75em;	
}
    p.small {
    display: table;
    margin: .5em 0 1.5em auto;
    font-size: .95em;
    font-family: sans-serif;
    font-weight: 700;
}

/*--- Menu Styles ---*/
.menu {
  list-style: none;
  text-align: center;
  padding: 0.25em 0 0;
  margin: 0 auto;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}
.menu li {
  display: inline-block;
}
.menu a {
  display: block;
  padding: 0.25em 0;
  margin: 0 1em .6em;
  text-decoration: none;
  font-size: .85em;
  font-weight: bold;
  color: #000;
}
.menu a:hover {
  color: #0000EE;
}
.menu a.current {  /*this is the current page anchor styles*/
  cursor: default;
  border-bottom: 1px solid;
}
.menu a.current:hover {
  color: #000;
}

/*--- Main Content Styles ---*/
.main {
  padding: 1px 0; /*uncollapse margins*/
}
.contain:after { /*to contain floats when they exist, just add a .contain class*/
  content: "";
  display: block;
  clear: both;
}
h2 {
  font-size: 1.3em;
  margin: .75em;
  text-align: center;
}
h3 {
  font-size: 1.1em;
  margin: .75em;
  text-align: center;
}
p {
  margin: .75em;
}

/*--- Home Page ---*/
.home .row > div {
  padding: 0;
  font-size: 1.1em;
  /*outline: 1px solid red;*/
}
.home .row p {
  font-size: 1.3em;
  margin: 1em 0;
  font-weight: 600;
  /* outline: 1px solid red; */
}
.home blockquote {
  margin: 1em 0 0 2em;
  padding: 1px 0;
  font-weight: 500;
  font-size: 1em;
  /* outline: 1px solid red; */
}
.home blockquote cite {
  display: block;
  text-align: right;
  font-size: 1.4em;
  margin: .5em .5em 0 0;
  /* outline: 1px solid red; */
}
  /*outline: 1px solid red;*/


/*--- Gallery Styles ---*/
.main.gallery { /*this allows for page specific styling*/
  text-align: center; /* center the inline-block thumbs*/
}
.thumbs {
  display:inline-block;
  vertical-align:top;
  width: 23%;
  margin: 0 .25em .75em;/* added .25em side margins*/
  /*padding: 0 6px; /*removed padding*/
  border: 1px solid #ccc;
  border-radius: 20px;
}
.thumbs:hover {
  border: 1px solid #777;
}
div.desc {
  padding: 15px;
  text-align: center;
}

/*--- Single Large Image Page Styles --*/
.img-wrap {
  width: 90%;
  margin: auto;
  text-align: center;
}
.index {
  display: table;
  width: 100%;
  margin: .75em 0;
  line-height: 1.1;
}
.index a {
  display: table-cell;
  width: 33.33%;
  text-decoration: none;
  font-size: 1em;
  font-weight: bold;
}
.index a:first-child {
  text-align: left;
}
.index a:last-child {
  text-align: right;
}
.img-wrap h1 {
  font-size: 1.5em;
  margin: .75em 0;
}
.img-wrap img {/*leave this selector here for future styles*/
  margin: auto; /* margin:auto is already on img styles*/
}

/*--- Begin Bio & Equipment Page ---*/
.main.bio-eqpmnt { /*this allows for page specific styling*/
  background: #eee; /*example background color, could be a background image*/
}
.row, .cap-columns {
  display: table;
  width: 100%;
  box-sizing: border-box;
  border-spacing: .5em;
}
.row > div, .column {
  display: table-cell;
  padding: .5em;
}
.caption-image img {
  display: block;
  width: 100%;
  max-width: 400px; /*actual image width*/
  height: auto; /* maintain aspect ratio*/
  margin: auto;
}
div.center {
  text-align: center;
  font-weight: 600;
}

/*--- .row is the 100% width captions ---*/
/*--- these classes are also used on the home page ---*/
.row {
  width: 90%;
  margin: auto;
}
.row > div {
  width: 50%;
  vertical-align: middle;
  font-weight: 500;
}
.row .author {
  display: block;
  max-width: 400px;
  margin: .5em auto;
  font-weight: 600;
  text-align: center;
}
.bio-eqpmnt .row p { /* bio-eqpt page only */
  max-width: 500px;
  margin: .5em auto;
  font-weight: 600;
}

/*--- .column is the 50% width captions ---*/
.equipment {
  border-top: 1px solid;
}
.column {
  width: 50%;
  vertical-align: top;
}
.column p {
  max-width: 400px;
  margin: 1em auto 0;
  font-weight: 600;
}
  .column ul {
    display: table;
    margin: 0 auto;
    padding: 0;
  }
  .column li {
    margin:.25em;
  }
@media all and (max-width: 800px) {
  .row {
    width: 100%;
  }
}
@media all and (max-width: 600px) {
  .row, .cap-columns,
  .row > div, .column {
    display: table;
    width: 100%;
  }
  .row .last {
    display: table-footer-group;
  }
}
/*--- End Bio & Equipment Page ---*/
/*--- Begin Contact Page ---*/
.contact{ text-align:center;}
.contact h2 {
  margin-bottom: 3em; /*or what ever you need*/
}


/*--- Media Queries ---*/
@media only screen and (max-width: 700px) {
  .thumbs {
    width: 46%;
  }
	.logo {
    width: 100%;
    height:100px;
    border-radius: 19px  19px 0 0;
    background: url(../images/logo.jpg);
    background-repeat:no-repeat;
    background-position:center;
    background-size: contain;
  }
  .heading {
    font-size: 1.6em;
  }
 
@media only screen and (max-width: 500px) {
  .thumbs {
  	width: 100%;
  }
 
  
  .heading {
    font-size: 1.5em;
    padding: 0 .5em;
  }
	
	

  .bio-image {
    float: none;
    display: block;
    width: 95%;
    margin: .75em auto;
  }
a  {   
    word-break: break-all;
  }

Was This Post Helpful? 0
  • +
  • -

#19 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15226
  • View blog
  • Posts: 60,944
  • Joined: 12-June 08

Re: bigger font size in dreamweaver

Posted 22 July 2019 - 02:26 PM

Quote

get my image to spread across the screen when viewing on a Iphone but it won't.

What is it doing?

Please do not create duplicate topics. Merging.
Was This Post Helpful? 0
  • +
  • -

#20 Maxx5   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 227
  • Joined: 15-September 15

Re: bigger font size in dreamweaver

Posted 22 July 2019 - 02:35 PM

Sorry about that. I didn't realize I did that. I scrolled down to see If I posted it or not and didn't see it. Sorry again.
Was This Post Helpful? 0
  • +
  • -

#21 Maxx5   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 227
  • Joined: 15-September 15

Re: bigger font size in dreamweaver

Posted 23 July 2019 - 07:26 AM

Can I take out the HTML code and CSS code for my logo and start over again? My logo still does not stretch across when viewing it on a IPhone.

http://www.charismacommunications.ca/
Was This Post Helpful? 0
  • +
  • -

#22 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15226
  • View blog
  • Posts: 60,944
  • Joined: 12-June 08

Re: bigger font size in dreamweaver

Posted 23 July 2019 - 07:30 AM

You can certain do what you want.

Again - look at your response CSS you wrote. The part about @media max-width..

As I mentioned, in a browser, hit f12, and resize the page by hand. You can literally see the CSS swap out when it gets "iphone size".

From there you can determine if your image is even valid for fill, or go about using 'stretch' to distort it to the container size.
Was This Post Helpful? 0
  • +
  • -

#23 Maxx5   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 227
  • Joined: 15-September 15

Re: bigger font size in dreamweaver

Posted 23 July 2019 - 09:05 AM

When I click the F12 button. What setting to I click on to see the changes happening when i manually resize?
Was This Post Helpful? 0
  • +
  • -

#24 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15226
  • View blog
  • Posts: 60,944
  • Joined: 12-June 08

Re: bigger font size in dreamweaver

Posted 23 July 2019 - 09:11 AM

Elements tab on the left hand.. style on the right.

Even go as far as having 'select an element' on the page for that specific image.
Was This Post Helpful? 0
  • +
  • -

#25 Maxx5   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 227
  • Joined: 15-September 15

Re: bigger font size in dreamweaver

Posted 23 July 2019 - 11:27 AM

I think we got it. It looks good. A little space above and below the image but looks good. Thanks for your patients.

http://www.charismacommunications.ca/
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2