TinyPortal

Development => Block Codes => Block Code General Help => Topic started by: bigguy on December 09, 2018, 07:43:53 PM

Title: Welcome block for bigguy
Post by: bigguy on December 09, 2018, 07:43:53 PM
The reason the margin-left is there is because if it is not all the bottom blocks are not centered under the top three. If you remove that all the blocks go right to far to be centered.

I will make the changes though...soon. I gotta clean up the desktop.
Title: Re: Welcome block for bigguy
Post by: @rjen on December 09, 2018, 08:23:30 PM
Better.  O0

If you can share your block code that you use for the top 3 blocks I can make those responsive too..

But maybe you can do that yourself by making it three separate blocks that you put in the front panel (before articles and posts)... they should work responsively too...
Title: Re: Welcome block for bigguy
Post by: bigguy on December 09, 2018, 08:33:38 PM
This is a front panel block:
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome message</title>
<style>
#wrapper {
  clear:all;
  display:table;
  border-collapse: separate;
    border-spacing: 2em 1em;
}
#row {
  display:table-row;
}
.divboxtitlebg {
    background: #C4542F;
    padding: 10px;
    margin: -3px -1px -3px;
    border: 1px solid #C4542F;
    border-radius: 8px;
    color:#fff;
    text-align:right;
    display: flex;
    align-items: center;
    justify-content: center;
-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,.8);
              -moz-box-shadow: 0px 0px 2px rgba(0,0,0,.8);
                         box-shadow: 0px 0px 2px rgba(0,0,0,.8);

          z-index: 100;
}
#block1 {
  display:table-cell;
  background-color:#88f793;
  width:auto;
  border-radius: 8px;
  padding-bottom:10px;
}
#block2 {
  background-color:#f7ec79;
  display:table-cell;
  width:auto;
  border-radius: 8px;
  padding-bottom: 10px;
}
#block3 {
  background-color:#f9bd6d;
  display:table-cell;
  width:auto;
   border-radius: 8px;
   padding-bottom: 10px;
}
</style>
</head>

<body id="tpbody" class="tpcontnainer">
<center>
<div id="row">
    <div id="block1">
        <h2 class="divboxtitlebg">Block Title One<img src="/welcome.png" alt="welcome" align="left"/></h2>
<br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.    </div>
    <div id="block2">
       <h2 class="divboxtitlebg">Block Title Two<img src="/users.png" alt="members" align="left"/></h2>
<br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.    </div>
<div id="block3">
      <h2 class="divboxtitlebg">Block Title Three<img src="/discussion.png" alt="discuss" align="left"/></h2>
<br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
</div>
</div>
</center>
</body>
</html>
<br />
Title: Re: Welcome block for bigguy
Post by: @rjen on December 09, 2018, 08:35:35 PM
I'll check it out tomorrow...
Title: Re: Welcome block for bigguy
Post by: bigguy on December 09, 2018, 08:38:31 PM
Take your time. :)
Title: Re: Welcome block for bigguy
Post by: @rjen on December 10, 2018, 10:39:24 AM
Hmmm, I had a quick look at the code you sent me, but I find that hou have included css styling in the block that has nothing to do with the contents of the block.

This code

#wrapper {
  clear:all;
  display:table;
  border-collapse: separate;
    border-spacing: 2em 1em;
}


Is affecting the frontpage as a whole: I would not do that tbh. You choice of course.
This would better fit into a css file not a block...
Title: Re: Welcome block for bigguy
Post by: bigguy on December 10, 2018, 05:04:12 PM
Quote from: @rjen on December 10, 2018, 10:39:24 AM
Hmmm, I had a quick look at the code you sent me, but I find that hou have included css styling in the block that has nothing to do with the contents of the block.

This code

#wrapper {
  clear:all;
  display:table;
  border-collapse: separate;
    border-spacing: 2em 1em;
}


Is affecting the frontpage as a whole: I would not do that tbh. You choice of course.
This would better fit into a css file not a block...


I don't think I put that in there. It probably came with the code. I might have put this in:

border-collapse: separate;
Title: Re: Welcome block for bigguy
Post by: @rjen on December 28, 2018, 11:02:42 AM
Quote from: bigguy on December 09, 2018, 08:33:38 PM
This is a front panel block:
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome message</title>
<style>
#wrapper {
  clear:all;
  display:table;
  border-collapse: separate;
    border-spacing: 2em 1em;
}
#row {
  display:table-row;
}
.divboxtitlebg {
    background: #C4542F;
    padding: 10px;
    margin: -3px -1px -3px;
    border: 1px solid #C4542F;
    border-radius: 8px;
    color:#fff;
    text-align:right;
    display: flex;
    align-items: center;
    justify-content: center;
-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,.8);
              -moz-box-shadow: 0px 0px 2px rgba(0,0,0,.8);
                         box-shadow: 0px 0px 2px rgba(0,0,0,.8);

          z-index: 100;
}
#block1 {
  display:table-cell;
  background-color:#88f793;
  width:auto;
  border-radius: 8px;
  padding-bottom:10px;
}
#block2 {
  background-color:#f7ec79;
  display:table-cell;
  width:auto;
  border-radius: 8px;
  padding-bottom: 10px;
}
#block3 {
  background-color:#f9bd6d;
  display:table-cell;
  width:auto;
   border-radius: 8px;
   padding-bottom: 10px;
}
</style>
</head>

<body id="tpbody" class="tpcontnainer">
<center>
<div id="row">
    <div id="block1">
        <h2 class="divboxtitlebg">Block Title One<img src="/welcome.png" alt="welcome" align="left"/></h2>
<br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.    </div>
    <div id="block2">
       <h2 class="divboxtitlebg">Block Title Two<img src="/users.png" alt="members" align="left"/></h2>
<br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.    </div>
<div id="block3">
      <h2 class="divboxtitlebg">Block Title Three<img src="/discussion.png" alt="discuss" align="left"/></h2>
<br />
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
</div>
</div>
</center>
</body>
</html>
<br />


I just realized I made a promise some time ago...
Just had a play with your welcome block(s)...

This uses part of the theme style and is responsive...


<style>
#row {
float: left;
    width: 100%;
border-spacing: 10px;
}
.boxtitlebg {
    display: flex;
height: auto!important;
    align-items: center;
    justify-content: center;
}
.genblock {
display:table-cell;
width:32%;
height:100%;
border-radius: 8px;
padding-bottom:10px;
margin-bottom:10px;
}
#block1 {
background-color:#88f793;
}
#block2 {
background-color:#f7ec79;
}
#block3 {
background-color:#f9bd6d;
}

@media all and (max-width: 900px) {
.genblock {
display:block;
width:100%;
}
}
</style>

<body id="tpbody" class="tpcontnainer">
<center>
<div id="row">
    <div id="block1" class="genblock">
<div class="cat_bar">
<h2 class="catbg boxtitlebg">Block1<img src="/welcome.png" alt="welcome" /></h2>
</div>
    <div id="block1">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div id="block2" class="genblock">
<div class="cat_bar">
       <h2 class="catbg boxtitlebg">Block2<img src="/users.png" alt="members" align="left"/></h2>
</div>
    <div id="block2">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos.
</div>
</div>
<div id="block3" class="genblock">
<div class="cat_bar">
<h2 class="catbg boxtitlebg">Block3<img src="/discussion.png" alt="discuss" align="left"/></h2>
</div>
    <div id="block3">
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?. </div>
</div>
</div>
</center>
Title: Re: Welcome block for bigguy
Post by: lurkalot on December 28, 2018, 12:15:14 PM
Quote from: @rjen on December 28, 2018, 11:35:35 AM
Sure, no probs, changed.

Thanks.  O0


Quote from: @rjen on December 28, 2018, 11:39:38 AM
Just grabbed the latest code from 2.1 and updated my test site. Got an error on upgrade when  updating the calendar I think. Seems to work ok though...

QuoteError!
You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near 'INSERT INTO smf_calendar_holidays (title, event_date) VALUES ('New Year''s', '1' at line 6

Think they made a load of changes to the calendar over the last few days actually, maybe they've broken something that needs reporting, it might already be reported.

I got a error when I upgraded due to a broken upgrade.php script which they pointed me to a fix. appart from that it's been pretty solid so far.
Title: Re: Welcome block for bigguy
Post by: lurkalot on December 28, 2018, 01:17:49 PM
Quote from: @rjen on December 28, 2018, 11:02:42 AM

I just realized I made a promise some time ago...
Just had a play with your welcome block(s)...

This uses part of the theme style and is responsive...


Must say that looks really neat now @rjen http://cctestsite.info/testsite3/index.php
Title: Re: Welcome block for bigguy
Post by: bigguy on December 28, 2018, 04:41:15 PM
@@rjen: You updated the code for the 3 blocks, that's very cool. I will change this later today. Almost time to go to work. :(
Title: Re: Welcome block for bigguy
Post by: @rjen on December 28, 2018, 04:42:15 PM
haha, that's unfortunate: you will have to wait to play....  O0
Title: Re: Welcome block for bigguy
Post by: bigguy on December 28, 2018, 05:44:54 PM
I know, it really sucks, lol.  :'(
Title: Re: Welcome block for bigguy
Post by: bigguy on December 28, 2018, 11:33:14 PM
Now I get to play, lol. Well, for a bit I gotta go get the wife. I have to say, those blocks look real good. Very nice job and thank you for taking the time to do that. :)
Title: Re: Welcome block for bigguy
Post by: bigguy on December 29, 2018, 03:28:48 AM
I know this isn't the thread for this so I will be quick. I gotta say not only is TP runnin like a champ, but those three blocks look awesome. Everything looks good in chrome on my phone and tablet. Really great job guys. Thanks for all the hard work.
Title: Re: Welcome block for bigguy
Post by: lurkalot on December 29, 2018, 10:36:19 AM
Quote from: bigguy on December 29, 2018, 03:28:48 AM

I know this isn't the thread for this so I will be quick.


You can chat about it as much as you like here now, @rjen has spit this subject into a new topic. Thanks @rjen  O0

Quote from: bigguy on December 29, 2018, 03:28:48 AM
I gotta say not only is TP runnin like a champ, but those three blocks look awesome. Everything looks good in chrome on my phone and tablet. Really great job guys. Thanks for all the hard work.

Thanks for the feedback. I agree, that block is really nice now, might use it myself at some point. Love the way it stacks on mobile.  Your front page scales nicely now when adjusting screen size, where before it just added a scrollbar. Should be good for your mobile users.
Title: Re: Welcome block for bigguy
Post by: bigguy on December 29, 2018, 07:25:28 PM
Yeah the stackability is very cool. It just looks more sharp and clear I think. I did have to make one modification. In the css for the title. I noticed that the title in the first block was 1px lower than the others, letting the background show through at the top of the title. So there was a line in there about !important or something. I took it out and all lined up....wait now, I think I made another change as well to something. I will have to look. I'll get back to ya, lol.  :doh:
Title: Re: Welcome block for bigguy
Post by: bigguy on December 29, 2018, 07:52:32 PM
It was something in the style I changed. Here is my code for that area. I just can't remember what I changed. I have done a lot of editing lately, lol.
<style>
#row {
    float: left;
    width: 100%;
    border-spacing: 10px;
}
.boxtitlebg {
    display: flex;
    align-items: center;
    justify-content: center;
}
.genblock {
    display:table-cell;
    width:32%;
    height:100%;
    border-radius: 8px;
    padding-bottom:10px;
    margin-bottom:10px;
}
#block1 {
    background-color:#88f793;
}
#block2 {
    background-color:#f7ec79;
}
#block3 {
    background-color:#f9bd6d;
}

@media all and (max-width: 900px) {
.genblock {
    display:block;
    width:100%;
}
}
</style>
Title: Re: Welcome block for bigguy
Post by: lurkalot on December 29, 2018, 08:05:48 PM
Quote from: bigguy on December 29, 2018, 07:25:28 PM
Yeah the stackability is very cool. It just looks more sharp and clear I think. I did have to make one modification. In the css for the title. I noticed that the title in the first block was 1px lower than the others, letting the background show through at the top of the title. So there was a line in there about !important or something. I took it out and all lined up....wait now, I think I made another change as well to something. I will have to look. I'll get back to ya, lol.  :doh:

Mines stock code apart from the spacing between titles and images.  Does that show the same problem you were having, or is the title in the first block ok? http://cctestsite.info/testsite3/
Title: Re: Welcome block for bigguy
Post by: bigguy on December 29, 2018, 09:48:05 PM
No that all seems fine. Not sure why mine showed up weird. It shows up perfect for me now.
Title: Re: Welcome block for bigguy
Post by: @rjen on December 29, 2018, 10:46:05 PM
The important! you removed was to overrule fixed height of the header. Only needed if you have a long title text.
Title: Re: Welcome block for bigguy
Post by: bigguy on December 30, 2018, 02:10:56 AM
Well, it looks good all around for sure. Thanks again all for the work on this.  :)
Title: Re: Welcome block for bigguy
Post by: VladTepes on April 08, 2019, 04:37:49 AM
OK stupid question - where does this code go please? Or does it replace something somewhere?

(This is all I have been able to accomplish without code edits, using TP blocks so far https://www.droneflightforum.com/index.php )



Quote from: @rjen on December 28, 2018, 11:02:42 AM
This uses part of the theme style and is responsive...


<style>
#row {
float: left;
    width: 100%;
border-spacing: 10px;
}
.boxtitlebg {
    display: flex;
height: auto!important;
    align-items: center;
    justify-content: center;
}
.genblock {
display:table-cell;
width:32%;
height:100%;
border-radius: 8px;
padding-bottom:10px;
margin-bottom:10px;
}
#block1 {
background-color:#88f793;
}
#block2 {
background-color:#f7ec79;
}
#block3 {
background-color:#f9bd6d;
}

@media all and (max-width: 900px) {
.genblock {
display:block;
width:100%;
}
}
</style>

<body id="tpbody" class="tpcontnainer">
<center>
<div id="row">
    <div id="block1" class="genblock">
<div class="cat_bar">
<h2 class="catbg boxtitlebg">Block1<img src="/welcome.png" alt="welcome" /></h2>
</div>
    <div id="block1">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div id="block2" class="genblock">
<div class="cat_bar">
       <h2 class="catbg boxtitlebg">Block2<img src="/users.png" alt="members" align="left"/></h2>
</div>
    <div id="block2">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos.
</div>
</div>
<div id="block3" class="genblock">
<div class="cat_bar">
<h2 class="catbg boxtitlebg">Block3<img src="/discussion.png" alt="discuss" align="left"/></h2>
</div>
    <div id="block3">
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?. </div>
</div>
</div>
</center>

Title: Re: Welcome block for bigguy
Post by: @rjen on April 08, 2019, 06:02:49 AM
This code was created for a upper block or top block and in fact simulates three separate blocks in one.

I is created for a specific case and setting though: your settings may be different.

From what I see at your site you have removed parts from the code (the css for one), that can break the blockcode, and that's what has happened from the looks of it..

Take the FULL code and adapt it to you liking. You cannot strip the full css part...

Title: Re: Welcome block for bigguy
Post by: VladTepes on April 09, 2019, 01:15:04 AM
Quote from: @rjen on April 08, 2019, 06:02:49 AM
From what I see at your site you have removed parts from the code (the css for one), that can break the blockcode, and that's what has happened from the looks of it..


I didn't touch the code everything that appears there is via TP settings.
Title: Re: Welcome block for bigguy
Post by: @rjen on April 09, 2019, 05:42:28 AM
No clue what you did then, you will have to be more specific . The code is meant to go into an html block.

What TP settings did you make?
Title: Re: Welcome block for bigguy
Post by: jernatety on April 09, 2019, 05:34:06 PM
Did that guy respond from 4 months into the future?

Title: Re: Welcome block for bigguy
Post by: @rjen on April 09, 2019, 05:39:36 PM
Strange!

The message is showing the correct date now...
Title: Re: Welcome block for bigguy
Post by: jernatety on April 09, 2019, 05:51:50 PM
Quote from: @rjen on April 09, 2019, 05:42:28 AM
No clue what you did then, you will have to be more specific . The code is meant to go into an html block.

What TP settings did you make?


<style>
#row {
float: left;
width: 100%;
border-spacing: 10px;
}
.boxtitlebg {
display: flex;
height: auto!important;
align-items: center;
justify-content: center;
}
.genblock {
display:table-cell;
width:32%;
height:100%;
border-radius: 8px;
padding-bottom:10px;
margin-bottom:10px;
box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.1);
}
#block1st {
background-color:#88f793;
}
#block2nd {
background-color:#f7ec79;
}
#block3rd {
background-color:#f9bd6d;
}

@media all and (max-width: 900px) {
.genblock {
display:block;
width:100%;
}
}
</style>

<body id="tpbody" class="tpcontnainer">
<center>
<div id="row">
    <div id="block1st" class="genblock">
<div class="cat_bar">
<h2 class="catbg boxtitlebg">Block1  <img src="https://www.tinyportal.net/Themes/default/images/tinyportal/menu_tp.png" alt="welcome" /></h2>
</div>
<div id="block1" class="tp_pad">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div id="block2nd" class="genblock">
<div class="cat_bar">
   <h2 class="catbg boxtitlebg">Block2  <img src="https://www.tinyportal.net/Themes/default/images/tinyportal/online.png" alt="members" align="left"/></h2>
</div>
<div id="block2" class="tp_pad">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos.
</div>
</div>
<div id="block3rd" class="genblock">
<div class="cat_bar">
<h2 class="catbg boxtitlebg">Block3  <img src="https://www.tinyportal.net/Themes/default/images/tinyportal/menu_tpforum.png" alt="discuss" align="left"/></h2>
</div>
<div id="block3" class="tp_pad">
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?.
</div>
</div>
</div>
</center>


I used this to create ad space for anybody interested in advertising.
Title: Re: Welcome block for bigguy
Post by: @rjen on April 14, 2019, 03:43:37 PM
Below code is an update using flexboxes ... a bit of fiddling on the sunday afternoon...


<style>
#flexbox {
display: inline-flex;
flex-flow: row wrap;
align-items: stretch;
justify-content: space-between;
}
.genblock {
width: calc(1/3*100% - (1 - 1/3)*6px);
border-radius: 8px;
padding-bottom:10px;
margin-bottom: 6px;
}
#block1st {
background-color:#88f793;
}
#block2nd {
background-color:#f7ec79;
}
#block3rd {
background-color:#f9bd6d;
}
@media all and (max-width: 900px) {
.genblock {
flex: 1 0 100%;
}
}
</style>

<body id="tpbody" class="tpcontnainer">
<div id="flexbox">
    <div id="block1st" class="genblock">
<div class="cat_bar">
<h3 class="catbg"><img src="https://www.tinyportal.net/Themes/default/images/tinyportal/menu_tp.png" alt="welcome">  Block1</h2>
</div>
<div id="block1" class="tp_pad"><center>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</center>
</div>
</div>
<div id="block2nd" class="genblock">
<div class="cat_bar">
   <h3 class="catbg"><img src="https://www.tinyportal.net/Themes/default/images/tinyportal/online.png" alt="members">  Block2</h2>
</div>
<div id="block2" class="tp_pad"><center>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </center>
</div>
</div>
<div id="block3rd" class="genblock">
<div class="cat_bar">
<h3 class="catbg"><img src="https://www.tinyportal.net/Themes/default/images/tinyportal/menu_tpforum.png" alt="discuss">  Block3</h2>
</div>
<div id="block3" class="tp_pad"><center>
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? </center>
</div>
</div>
</div>
</center>
Title: Re: Welcome block for bigguy
Post by: lurkalot on April 14, 2019, 04:37:45 PM
Nice one @rjen.  ;)

Looks great in both Firefox and Chrome.  What is the advantage using flex as opposed to the original?

I'm guessing it doesn't like IE11 as it breaks if you zoom the page. It doesn't in the other browsers.  And in Edge, this might just be mine, but the middle and right blocks lose their colours at 100% zoom, but come back at 75% for some reason. https://cctestsite.info/testsite3/index.php
Title: Re: Welcome block for bigguy
Post by: @rjen on April 14, 2019, 04:51:30 PM
Flexbox is new and improved, you see it in curve2 as well . Should work in ie though, opposed to css grid, which is not supported by ie11 I think...
Title: Re: Welcome block for bigguy
Post by: wildenborch on April 15, 2019, 10:11:11 AM
Wow, this is indeed a nice one!
Title: Re: Welcome block for bigguy
Post by: @rjen on April 15, 2019, 11:41:24 AM
Quote from: lurkalot on April 14, 2019, 04:37:45 PM
Nice one @rjen.  ;)

Looks great in both Firefox and Chrome.  What is the advantage using flex as opposed to the original?

I'm guessing it doesn't like IE11 as it breaks if you zoom the page. It doesn't in the other browsers.  And in Edge, this might just be mine, but the middle and right blocks lose their colours at 100% zoom, but come back at 75% for some reason. https://cctestsite.info/testsite3/index.php

Once again, I cannot fully reproduce what you are seeing: in IE11 there is indeed something funny going on, which I would need to check, but in Edge all is working as it should....
Title: Re: Welcome block for bigguy
Post by: jernatety on May 08, 2019, 01:38:55 PM
The strangest thing is happening.

This block, (the responsive code) works on my 19" screen when I resize, and it works on my phone and tablet. But at home on my 14" laptop screen it's not responsive. The right side overlaps the 3rd block and a horizontal scroll bar appears on the block.

Does anybody have a smaller size laptop screen like my business class work laptop they could take a look at my front page on?

Thank you
Title: Re: Welcome block for bigguy
Post by: @rjen on May 08, 2019, 04:58:27 PM
You have put fixed width images in the blocks!

Apply css to make sure the images are set to max-width: 100%

and apart form that this add block is not respecting the size, thus resulting in distrotion on other elements...
Title: Re: Welcome block for bigguy
Post by: jernatety on May 08, 2019, 05:08:29 PM
Hi rjen, thank you for looking. The ad block I can't do anything about. That's automatically generated with adense new "auto-responsive" ads. They're placed by adsense automatically.
Title: Re: Welcome block for bigguy
Post by: @rjen on May 08, 2019, 05:32:52 PM
You want to add in your tp-style.css at the end:

img
{
   max-width: 100%;
}

There is no reason I can think of you would EVER want an image larger than 100% ...

That way you can never forget to set a max-width...
As for the google adds: if they mess up you site layout, you can choose not to use them...
Title: Re: Welcome block for bigguy
Post by: jernatety on May 08, 2019, 07:40:12 PM
Quote from: @rjen on May 08, 2019, 05:32:52 PM
You want to add in your tp-style.css at the end:

img
{
   max-width: 100%;
}

There is no reason I can think of you would EVER want an image larger than 100% ...

That way you can never forget to set a max-width...
As for the google adds: if they mess up you site layout, you can choose not to use them...

Beautiful. I would forget too! Thank you very much.