I'm hoping someone can help direct me with troubleshooting for my portfolio page. I'm currently having issues with a few things and I'm not sure why or how to deal with them. Whenever I try to view them in tablet/mobile views on the deployed link the layout is completely different than when I run a live server with npm start.
The first issue about section in mobile and tablet views displays each paragraph in columns and the black background doesn't cover all of the text or the image.
The second issue is the contact page doesn't display the links on mobile even though the text color is set to black and the contact header doesn't show up on the page.
It was made in React. Below will be the deployed link and link to the github.
https://refactored-potato.netlify.app/
https://github.com/GSometimes/refactored-potato
I would really appreciate any help or guidance on sorting this out.
Thank you.
first piece of advice is that you have used TOO MUCH CSS, please use only what you really need. You don't need every css property to use on every element.
Your text/paragraphs are showing in column as their parent's display style is set first as inline and then flex. Either don't use it or write display: block
Related
I'm trying to figure out how to attach a tracking code to a link and still keep the anchor functional. This will be used in an email newsletter.
ex:
www.example.com/welcome#Intro so that link would scroll down to the intro section right?
now if I were to do the same thing but like this www.example.com/welcome#Intro?TrackingCode the scroll no longer works.
I tried to google it but I couldn't find anything, any suggestions?
thanks for your time!
Don't think you can track scrolls. The images load top to bottom. We can't use anything like lazy load as JavaScripts don't work in emails unless it's viewed in the browser. If you want to use on browser then you can use jQuery to do that.
Developed a web application using MeteorJS and deployed it on the MeteorJS cloud. It works great when using a computer however, everything looks very big when attempting to access it through mobile devices.
I don't have much experience with making web applications compatible on mobile devices but I'm just a little lost on what exactly I will need to do. Please advise.
Git: https://github.com/jalapagos/SimpleCalorieCounter
After seeing your app live, it looks like you haven't used any Bootstrap classes for your layout and some of the page elements.
I recommend that you use the bootstrap grid system to make you app responsive. A very handy tool for checking how things look in different devices is the Google Chrome Dev tools device mode. Here is what your app looks like in an iPad Mini device emulator.
EDIT: Added step by step instructions to get started with bootstrap
Here is what you need to do:
Adapt the basic bootstrap template for you app. Be sure to include the three <meta> tags right after the opening of the <head> tag. See #jeremeyK's answer below.
Note: the inclusion of bootstrap relates CSS and JS files, or even your custom caloriecounter.css file in this main template is NOT necessary, since Meteor would do that for you. You have the package twbs:bootstrap which will include the bootstrap related files for you.
See how the bootstrap grid system works. Basically you might want to consider a simple layout like as follows:
The text in red are the bootstrap class that you need to add to get the layout. You can see that the top navigation bar has a class navbar, while the smaller section/sidebar has col-xs-12 and col-md-3 classes, and larger section has col-xs-12 and col-md-9 classes. The col-xs-* applies for very small screen devices while the col-md-* applies for medium screen sizes.
What these classes mean here is, for the small section if the screen is very small (xs) then the area should cover the entire width of the window. If the screen is medium sized, then let it just occupy 1/4th of the window to make some space for the table section.
Once you have your basic layout ready, go to each component of your app like the navbar, buttons, modal, etc. and fix the HTML markups as per the sample code given for each component.
You can do these things very easily, you only need to follow the guides in the documentation. Also read explanation by #adamwolf below.
Have you added a viewport meta tag?
<meta name="viewport" content="initial-scale=1">
Sorry, cant comment yet. To add to tsega. bootstrap is very easy, just add the class and bootstrap does it for you.
http://getbootstrap.com/css/#grid
The grid system is based on 12 columns, by adding the class, for each row you should have the column add up to 12. You can chain these together, for example class="col-xs-12 col-md-6 col-lg-3"
this is saying, on a small screen the element width should be 100%, on a medium screen the element should be 50% and on a large screen the element should be 25%.
Please provide any examples or links which clearly explaining to create simple image gallery in Drupal 7.
Actually the image gallery should be in Thumb Nail Image with 4 images per row.
It should be categorized with simple menu.
If there is sub category, then there should be drop down menus.
Finally the gallery should be with pagination links.
I've tried with taxamony, but it not clear display as expected in front end.
Please provide the better way either thru code or any modules available.
There are different ways to do an image gallery. If something like galleria is what you are looking for you can do it very easily just by using an image field and drupal galleria module.
But in your case, you will have to use views. In that pull out the images you want, choose the
display as grid. Set the no. of columns to 4. Link to the original image. Then you can use the
Lightbox module to open them in a lightbox, if you want one.
For pagination you can use the default views pagination settings.
This might help you. Check out.
Is there a decent way in DNN 7 to modify the navigation block at the top? I am completely lost.
I am using the "Awesome Cycles" content as a template for a class project. All I am trying to do is change out the word "us" in the navigation at the top for the word "me".
I'm sure there must be an easy way to do it, but I don't think I "speak the language" well enough to google this. I have been literally searching for three days, and I know I'm going to feel stupid once someone points it out but... Oh well.
Thanks in advance!
You are correct that you can simple change the Page Name in the page settings to control what displays in the Navigation. But be aware that changing a page name also changes the URL of that page.
Check out this video for how to avoid bad URLs after changing pages
http://www.dotnetnuke.com/Resources/Video-Library/Viewer/Video/213/View/Details/Renaming-a-Page-in-DotNetNuke.aspx
tl;dr - create a new page, with the old name, make it hidden (not in the menu), and have it redirect to the new page.
I'm building a responsive website at the moment and the main site navigation contains 10 links. I've seen a few sites that compress their navigation into a simple drop down select menu when the screen size gets below 480px, but I can't find any tutorials out there that explain how to do this - apart from the CSS Tricks one here:
http://www.css-tricks.com/convert-menu-to-dropdown/
I've tried this tutorial but not had any success with it as I implemented the code and yes I get a lovely menu on the iPhone, but the links don't work and clicking on it makes the page zoom in which is not desirable as this doesn't happen when I don't have the menu in place.
I'm looking for something simple like used on these websites:
http://www.hanselman.com/blog/
http://www.lancs.ac.uk/
anyone?
I managed to find this snippet of code on http://www.w3schools.com here:
http://www.w3schools.com/js/tryit.asp?filename=tryjs_selectmenu
Implemented it and it works just fine - just had to add action="" to the form tag to get the page to validate.