Jump to content


  • Content count

  • Joined

  • Last visited

Community Reputation

0 Neutral

About webtrickshome

  • Rank

Recent Profile Visitors

279 profile views
  1. webtrickshome

    Some divs shrink and align left on mobile

    The first issue with your site even on larger screen view is the divs with id #banner-container and content-container. Remove the width value from their css. The html div tag automatically possesses a property display:block which means 100% width inclusive of paddings and margins. #content-container { background-color: #FFF; margin: 0 auto; padding: 25px; overflow: auto; } Once you do that your box1, box2 and box3 also need to be redefined. Define them as show below. .box1{ width: 30%; float: left; } .box2{ width: 30%; float: left; margin-left: 5%; } .box1{ width: 30%; float: right; } For device responsive first of all, add this line inside your <head> tag. <meta name="viewport" content="width=device-width, initial-scale=1"> Then redefine your div's widths as 100% wherever needed inside the media query. You can use @media(max-width: 767px){} for smaller screens at once. You can use @media(min-width: 768px) and (max-width: 991px){} for tablets. You can use @media(min-width: 992px) and (max-width: 1024px){} for desktops.
  2. webtrickshome

    Content Stacking vertically on Mobile Devices

    Why on earth are you using HTML tables. That's the worst thing to do. It's such a pain to even look into the matter.
  3. webtrickshome

    insert csv into mysql problem

    public function importExcel() { $file = $_FILES[&#39;uploads&#39;][&#39;tmp_name&#39;]; $handle = fopen($file, &quot;r&quot;); while($filesop = fgetcsv($handle, 1000, &quot;,&quot;)){ $name = $filesop[0]; $gender = $filesop[1]; $address = $filesop[2]; $age = $filesop[3]; $education = $filesop[4]; $contact = $filesop[5]; DB::table(&#39;visitors&#39;)-&gt;insert([ &#39;name&#39;=&gt;$name, &#39;age&#39;=&gt;$age, &#39;gender&#39;=&gt;$gender, &#39;address&#39;=&gt;$address, &#39;education&#39;=&gt;$education, &#39;contact&#39;=&gt;$contact, ]); } } At first, we retrieved the file from the temporary location and we opened it in reading mode. Using the while loop, we stored the values from the excelsheet rows as indexed arrays to some variables. Finally, we added those variables in the insert query and executed while remaining inside the loop. That makes the function run until the last row of excelsheet and insert each of those rows individually in database. Once completed, you can store a success message in session and display it to the user while redirecting the user.
  4. webtrickshome

    Creating Dynamic Checkbox Names

    use <input type="checkbox" name="ynDiscussed<?=CStr(i)?>"> instead and you are good to go.
  5. webtrickshome

    Whose have experience in web development projects?

    The only way you can improve your portfolio is by improving the volume of your work experience. So, keep on working on the projects and keep updating your portfolio.
  6. webtrickshome

    Script conflict?

    You are forcing the id dots to be inline at any case. if dot's style is none make it inline else change it to display none. What does that mean? It's again forcing the div to go inline. Workout on this if else condition and all will work fine.
  7. webtrickshome

    CSS Buttons: width and height tags don't work

    The best option to give equal width to your buttons is to give the width itself in pixel value with text-align center property. You can add little padding on each side for vertical spacing. .your-button{ width: 100px; text-align: center; padding: 5px 10px; } You can also add hover effects to make them look more appealing.
  8. Greetings to all the users and administrators of w3scools invisionzone forum. I would love to get some constructive criticism on this web development tutorial site namely webtrickshome. It's been around for slightly more than a year but I redesigned it recently. Any feedback regarding the design and contents would be highly appreciated. Thankyou
  9. webtrickshome

    Position & centering <div>

    seems like you are planning a large container in the middle leaving equal spaces on each side. Do this. <div class="main-container"> </div> <style> .main-container{ width: 80%; margin: auto; } </style> This will give you a div with 80% width of the screen size automatically placed in the middle. Now, you can create three separate divs inside that main-container to place contents on different sides which looks like: <div class="main-container"> <div class="box"></div> <div class="box box-middle"></div> <div class="box box-last"></div> </div> Now, add some styles to these divs. <style> .box{ width: 30%; //this will make all three boxes of equal width float: left; // this will make all three boxes float to the left leaving the rest 10% space empty on the right end } .box-last{ float: right; // this will make the last box float to the right overriding the earlier float property and shift the 10% empty space between the second and last box. } .box-middle{ margin-left: 5%; // this will shift the middle box to the right leaving 5% of the empty space on the left which will make the other 5% empty space remain on the right and give a view of equal spacing among those boxes. text-align: center; I added this as it seems like you want the objects in the middle div to be centered. } </style>
  10. webtrickshome

    Transparent background/foreground for web page

    That's not exactly possible with css. The only thing you can do is make the background a bit transparent with background: rgba(0,0,0,0.1) which defines the background color and opacity of the body. The screenshot you've posted is an image file in png format not the screenshot of a page loaded in browser.
  11. webtrickshome

    How to create colored background in the header section?

    Generally, the header section is wrapped inside a html tag named <header></header>. If it's the parent div use it in your css file as header{ background: your-color; } If the header tag is wrapped inside some div then find the top level div and use it's id or class name to add the same. .divname or #idname{ background: your-color; }
  12. webtrickshome

    element not resizing correctly in browser

    You are overriding you media query css with your own blocks of css. Here's a list of screen sizes from webtrickshome you can use there. Screen Size Media Query Max width 320px @media (max-width: 320px) Min width 321px and Max width 375 @media (min-width: 321px) and (max-width: 375px) Min width 376px and Max width 425 @media (min-width: 376px) and (max-width: 425px) Min width 426px and Max width 640 @media (min-width: 426px) and (max-width: 640px) Min width 641px and Max width 767 @media (min-width: 641px) and (max-width: 767px) Min width 768px and Max width 992 @media (min-width: 768px) and (max-width: 992px) Min width 993px and Max width 1024 @media (min-width: 993px) and (max-width: 1024px) Min width 1025px and Max width 1440 @media (min-width: 1025px) and (max-width: 1440px) Generally, I'd use one as: @media(max-width:767px){} which would cover all smaller screens and another as @media(min-width:768px){} which would cover all larger screens. In case of complicated layouts, i'd use something like @media(max-width: 420px){} @media(min-width: 421px) and (max-width: 767px){} and go on to break down the screen sizes and restrict their impact on other screen sizes.
  13. webtrickshome

    W3-CSS Accordion Question

    You can use bootstrap accordion for convenience. It's responsive and easy to integrate as well.
  14. webtrickshome

    Modal box with link

    You are missing the # symbol in ahead of the id name followed by the data-toggle attribute. it should be <a href="#myModal" data-toggle="modal>Your Link Text Here</a>. data-toggle="modal" opens the modal window. data-target or href="#myModal" points to the id of the modal i.e. the id of the parent <div> of the model.
  15. webtrickshome

    Space between lines

    Within the paragraph, its only line height that works. In case its between multiple maragraphs then you can use either margin or padding. The best value for line-height is 1.6 em which means the height of the line is 1.6 times larger than the font size. So, you change the font size then the line height also adjusts itself. p.your-class{ line-height: 1.6em; }