Jump to content
mg19

w3 css - max width

Recommended Posts

Question, I am new to w3 css but I plan on using this versus bootstrap.  One thing I am trying to figure out is how to not use the screen 100% like bootstrap.  Is there a way to use only 80% or so of the screen or a certain pixel width and still make it work with all devices?

 

thanks for your help!

Share this post


Link to post
Share on other sites

Yes you can put the width to 80%, just in in your style put the element "width: 80%; " and It will take 80% of the parent width.

And also you can put the max-width: 500px; but in devices less than 500px it will be less than 500px (to avoid horizontal scroll bar)

Share this post


Link to post
Share on other sites

You would use media queries to determine when to change widths, especially smaller screens where 20% would be a fair chunk to lose on medium to smaller devices, in that case you would adjust width to 100% for specific set device width within a media query.

Share this post


Link to post
Share on other sites
On 2/11/2019 at 10:56 PM, mg19 said:

One thing I am trying to figure out is how to not use the screen 100% like bootstrap

Normally by default, bootstrap uses a fixed smaller width for larger devices, then 100% for smaller devices. You would only get 100% width on all devices if you used the class that gives 100% width whatever device size.

Share this post


Link to post
Share on other sites

dsonesuk, thank you for this help! :)  have another question you might be able to answer.

I am using w3-modal to display account notes.  the idea is when you click more on any account note it brings up the entire note in a modal.  I was wanting a way to when you click the link it will have a unique id and search the SQL database for the id and load the data into the modal so I don't have to load a bunch of models with unique names in the code increasing the page load time.

Can you point me in a direction for this?  I was thinking javascipt/json but i don't know if this is right.  When I look in google all I get is bootstrap and jquery which I dont want to use.  My back end is php/sql and w3-css.

Thank you,

Share this post


Link to post
Share on other sites

You can't escape using jQuery /JavaScript as you need these to send a request for data to a php page and return the result to the modal. Bootstrap is not required as it is a css framework as what w3css  is.

Share this post


Link to post
Share on other sites

Ss it possible to use only javascript without jquery?  I read about people saying to stay away from jquery, not sure why but don't want to make a mistake and have to re-code everything later.

As always, thank you.

Share this post


Link to post
Share on other sites

JQuery IS JavaScript, but is a library framework of functions to make code cross browser friendly and easier  to manipulate elements

If you use vanilla JavaScript you have to make sure it runs in all main browsers, as some browsers (MS IE for instance, (seven hail marys)) think you should do it their way for a specific coding, while better browsers follow common set method.

Share this post


Link to post
Share on other sites

Hey dsonesuk:

I am trying to get a input and button on the same line.  Here is what I am using but it keeps putting the search button below the input.  Thanks for all your help.

<p><input class="w3-input w3-border" name="searchString" type="text" id="start" placeholder="Search for Customer (address, name, phone and contacts)" value="<?php echo $searchString;?>" maxlength="40" required><button class="w3-btn w3-light-grey" type=submit name="location">Search</button></p>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...