Jump to content

Byron

Members
  • Posts

    12
  • Joined

  • Last visited

Byron's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. I know it's not using bootstrap but you can add different widths etc to container in different media queries and so on
  2. Hi guys I am in need of some advice/help please in regards to media queries and making things repsonsive. BTW my site is using the twiter bootstrap framework (Not sure if that makes any difference or not) At the moment I am currently in the progress of creating a HTML page: http://unlockingblueprints.com/templates/responsive/membership-course-page.html that Is exactly the same as the word press page: https://optimizepressplus.com/instruct-membership-course-page-new/ I have just started doing it.. If you look at the instruct Homepage heading - I have copied all of CSS code + media queries for it.. However for some reason on the HTML it does not work the same as it does on the wordpress page.. If you change the screen size on the word press page you will noticed that the font size changes correctly but not actually on the HTML page.. And I have no idea why.....
  3. Alright guys I am wondering if anyone has got a very good understanding of HTML and also Twitter Bootstrap please.... I have already got the following page https://optimizepressplus.com/instruct-membership-course-page-new/ which was a WordPress page changed over to a HTML page which can be found here http://unlockingblueprints.com/demo/optimizepressplus/instruct-membership-course-page-new.html however there a few issues.. The first issue that I have notice is there appears to be a lot of code used just to do one thing... I.e If you just look at the section where it says INSTRUCT HOMEPAGE, and then just the blue box and it's contents, you get all of the following code.. <div class="element-container cf" > <!--blue box --> <div class="feature-box-creator feature-box-creator-style-1" style="margin-bottom: 0px; border: 1px #000 solid; border-width: 0px; width: 100%; background-color: #39add1;"> <div class="feature-box-content course" style="padding-top: 15px; padding-right: 30px; padding-bottom: 30px; padding-left: 30px;"> <div class="element-container cf " > <div class="op-text-block" style="width:100%;text-align: left; color:rgb(255, 255, 255);"> <p><img src="pics/icon1.png" alt="" width="150" height="150" align="right" class="session_image"/></p> <h3><span style="color: #fff;">Instruct Homepage</span></h3> <p style='color:#f5fafa;'>Lorem ipsum dolor sit amet, consectetur varius adipiscing elit. Morbi nst netus sapien ultricies variuse vitae ante sapien. Mauris varius turpis quis pellentesque dignissim. Platea blandit molestie ante risus hac et molestie magna eut imperdiet magna beatae aliquam dolore faucibus.</p> </div> </div> </div> </div> </div> <!-- end of blue box --> I would like to try and simplify the code and also correct the errors that are on their due to responsive design.. From what I can understand the feature-box-creator acts as sort of container (bear with me if I am describing things wrongs ) I believe so because it's on all of the other boxes on the page.. I was thinking of changing that to box and then copying over all of the CSS..... Then for feature-box-creator-style-1 changing it to box-blue and then have all the styling code for it under that section... Would that work?
  4. Alright guys I am in need of some help please in regards to the navigation bar on my site.. Can you please take a look here http://unlockingblueprints.com At the moment for some reason the navigation bar is displaying bullet points that are actually used somewhere else on the site. Even though for that section I am using a different style class for it. How do I stop them being displayed there?? css code: .white {text-decoration:none;color:#3F0;}.white:hover { text-decoration:underline;color:[[MENU_HOVER_COLOR]];}.whitenav { text-decoration:none;color:[[MENU_TEXT_COLOR]];}.whitenav a:link, .whitenav a:visited, .whitenav a:active { text-decoration:none;color:[[MENU_TEXT_COLOR]];}.whitenav a:hover { text-decoration:underline;}.sf-menu li {background-color:#F09;list-style-type:none;}.sf-menu li li {background-color: [[MENU_BACKGROUND_COLOR]];list-style-type:none;}.sf-menu li li li {background-color: [[MENU_BACKGROUND_COLOR]];list-style-type:none;}.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {background: [[MENU_HOVER_COLOR]]; outline: 0;}.sf-menu a, .sf-menu a:visited {color: #3F0;}label.error { float: none; color: red; padding-left: .5em; vertical-align: top; display: block; }​ .sf-menu li { background-color:[[HEADER_BG_COLOR_1]] } .sf-menu { float: left ; list-style-type:none; list-style-image:none; } </style> <ul class="sf-menu"><?php if(isset($_GET['page']) || $_GET['page'] !='home') echo '[[TOP_MENU]]' ?></ul>
×
×
  • Create New...