So I just finished building a site called https://services.codexcentre.com, and able to duplicate the page fine on my PC.
But when I provide my friend to review the site, she inform me on the first page down below where the 4 boxes are located it looks squeezed together - this only shows on mobile (PC it looks fine.)
When I duplicate the problem on my phone, I find the same issue and not sure why it's doing this. I have the code pasted below to how this was structured. To have an idea, this is a wordpress site and I custom coded this section due to problems with the wordpress column structure.
Any feedback is appreciated.
<style>
.gallery_container{
max-width: 1200px;
padding: 30px;
margin: 20px auto;
}
#shop_column{
column-count: 2;
column-gap: 15px;
}
#shop_page{
text-align: center;
font-family: 'Tangerine', cursive;
font-size: 36px;
padding: 0px;
margin: 0px auto;
}
#shop_image{
cursor: pointer;
width: 750px;
height: 345px;
padding: 10px;
margin: 10px auto;
}
</style>
<div class="gallery_container">
<div id="shop_column">
<a href="http://services.codexcentre.com/new-build/">
<img id="shop_image" src="imgs/home01.jpg">
</a>
<p id="shop_page">New Build</p>
<a href="http://services.codexcentre.com/dining-remodel/">
<img id="shop_image" src="imgs/dining01.jpeg">
</a>
<p id="shop_page">Living Room Remodel</p>
</div>
<div id="shop_column">
<a href="http://services.codexcentre.com/kitchen-remodel/">
<img id="shop_image" src="imgs/kitchen01.jpg">
</a>
<p id="shop_page">Kitchen Remodel</p>
<a href="http://services.codexcentre.com/bathroom-remodel/">
<img id="shop_image" src="imgs/bathroom01.jpg">
</a>
<p id="shop_page">Bathroom Remodel</p>
</div>
</div>
What are you expecting should happen?
As I can see, you have two problems depending what you want.
You get two columns in mobile but want one. Fix by adding media-query to one column in mobile.
Images get stretched since you have fixed values.
You have To make your website responsive so that it look attractive in all the devices.
#media(Max-width:345px){#shop_image{width:250px}}
And change other aspects also according to the width of device
Related
I've recently started learning web dev. I'm making a site that fetches data from the mealdb api and displays the data. I've mostly gotten everything working, but the issue is when I inspect the web page and view it on mobile, the image is rendered on top of the text, i.e. the title and the ingredients. How do I prevent this from happening?
Ideally, on a mobile device, I'd like to show the title, followed by the image, ingredients and the instructions in a single column.
This is how it looks on desktop:
On mobile:
.Recipe {
padding-top: 30px;
text-align: left;
display: flex;
flex-wrap: wrap;
justify-content: center;
overflow: auto;
vertical-align: text-top;
}
.left-content {
width: 40%;
float: left;
}
.list {
list-style: none;
padding-left: 0px;
padding-bottom: 15px;
font-size: 1.2rem;
}
.right-content {
width: 40%;
float: right;
}
.title {
font-size: 3rem;
justify-content: center;
padding-bottom: 0px;
}
.instructions {
font-size: 1.2rem;
}
.Recipe h1 {
text-align: center;
padding-left: 250px;
}
.image {
float: right;
height: 480px;
width: 480px;
margin: 20px
}
<div className="Recipe">
<div className="left-content">
<h2 className="title">{prop.food.meals[0].strMeal}</h2>
<ul className="list">
{prop.materials.map(function(ingredients){ return
<li key={ingredients.strIngredient}>{ingredients.name + " - " + ingredients.amount}</li>
})}
</ul>
<p className="instructions">{prop.food.meals[0].strInstructions}</p>
</div>
<div className="right-content">
<img src={prop.food.meals[0].strMealThumb} alt="" className="image" />
</div>
</div>
This is a CSS situation, and for this specific situation I highly suggest learning about grid: https://css-tricks.com/snippets/css/complete-guide-grid/
Now, I know you probably don't want to read that much or learn something entirely new just to solve this. So for now I will give you a quick solution, which it isn't so bad in terms of performance.
You can use react-device-detect
It has some components that print specifically on Desktop or Mobile. So in your case you can have something like this:
import {BrowserView, MobileView} from 'react-device-detect';
And in your render:
<div className="Recipe">
<div className="left-content">
<h2 className="title">{prop.food.meals[0].strMeal}</h2>
<MobileView>
<img src={prop.food.meals[0].strMealThumb} alt="" className="image"/>
</MobileView>
<ul className="list">
{prop.materials.map(function(ingredients){
return <li key={ingredients.strIngredient}>{ingredients.name + " - " + ingredients.amount}</li>
})}
</ul>
<p className="instructions">{prop.food.meals[0].strInstructions}</p>
</div>
<BrowserView>
<div className="right-content">
<img src={prop.food.meals[0].strMealThumb} alt="" className="image"/>
</div>
</BrowserView>
</div>
The idea is printing the image "twice", one for mobile and one for desktop. However, they will not be printed at the same time, obviously. And the images on web get requested only once, so you can print the same image dozens of time but it will only be loaded once on the browser, which is why this alternate solution works well.
If you don't want to use react-device-detect, you can print the image twice (on the same location as the example), and on CSS just use Media Query to set a display: none for mobile and desktop when they're not required. Let me know if you prefer CSS and I can elaborate further on how to do this on CSS. But I don't suggest this one because it is less efficient since the HTML will have two tags of the same image even if you're hiding them on CSS.
Let me know if you have any questions. And I hope this was helpful.
I'm making a menu section that a profile png with a sign in next to it. It needs to be an anchor all together, that way when you hover over it it's a link that goes to the log-in page, both the img and text but all together... If I'm making sense to you. I cant figure it out. Below is code so far:
<div class="signin-div topbar-section">
<a class="sign-in" href="#sign-in"><img class="signin-img" src="images/profile-icon.png" alt="profile-icon">Sign in</a>
</div>
And in CSS:
.sign-in {
float: left;
font-size: 90%;
padding: 12px;
margin-left: -14px;
}
.signin-img {
width: 25px;
margin: 10px 10px;
float: left;
Disclaimer, this code works (centered with the rest of the code for the top-bar-ul and it's not what I want it to be regarding one big anchor) I know it comes up not looking correctly as it should.
I'm not really sure what you're looking for but if you want an image and text to work as a link when you need to have a group/block as the link. (sorry if the way my words put it seams weird/confusing. in that case, I hope my example will do the work)
for example:
<html>
<body>
<div style="font-family: Helvetica; font-size: 12pt; border: 1px solid black;">
<a href="http://google.com" style="text-align: center;">
<div>
<img src="https://d1nhio0ox7pgb.cloudfront.net/_img/o_collection_png/green_dark_grey/256x256/plain/user.png" alt="user Image">
<br>
user
</div>
</a>
</div>
</body>
</html>
I have the exact coding in my html for each of these columns and I'm not sure what I've changed in my css to make the columns all look so different. The left column is the style and positioning that I want. I don't understand how all the more buttons are different and how the more button on the right is completely separate from the grey box even though they are in the same div...I'm new at this so any help would be greatly appreciated!
I will add a jsfiddle to show all of the code and I'll add a portion of the code here: https://jsfiddle.net/40bnatg3/
Also here is a picture of the problem:
<div class="column-center">
<div id= "middle-box">
<h2> Objectives</h2>
<img class="img" src="techpic4.jpg" alt="example web page" width="200" height="200" />
<p >Upon successful completion of the course the student will:
1) Demonstrate competency in the following computer software applications or
practices;
a. HyperText Markup Language (HTML5)
b. Cascading Style Sheets (CSS3)
c. Photoshop
d. IFirefox, Chrome, Safari, IE
e. FTP clients (Fetch, Filezilla, etc.)
2. Design web pages of various complexities.
3. Understand terminology used in web publishing.
4. Discuss the importance of graphic applications and their relationship to the graph
-
ic communications industry.
<br>
<a id="button2" href="msum.css" class="more">More</a>
</p>
</div>
</div>
Remove position:relative from .column_center style class definition:
.column-center{
display: inline-block;
width: 30%;
padding: 1%;
bottom: 18px;
}
Also, you will have to remove a br tag that is between left colum html and center column html in line 49.
Then you will have to change the button1 id definition to:
#button1{
color:black;
top: 35px;
width: 30%;
padding: 1%;
position: relative;
display: inline-block;
font-weight:bold;
}
Edit:
I think it is cleaner for your code to remove all the css styles for #button1, #button2 and #button3 and just leave the style for class .more like this:
.more {
position: relative;
display:inline-block;
color:black;
font-weight: bold;
top: 20px;
right: 31px;
background-color: white;
border-bottom-left-radius: 10px;
padding: 5px;
margin: 10px;
width: 30%;
}
I've got a multiple page website that uses the same header on every page. Im php including the header. On all but one page, the header sits in the same spot, however, on only one of the pages, the header moves about 5px to the right. I've been troubleshooting it and I've found that if I set the div tag below it a min height of 500px, then the menu shifts back into place. As soon as the height gets below 500px, however, it moves 5px to the right again. I have identified my problem, but I do not know whats causing it or how to fix it.
I didn't see a lot of posts on stackoverflow specific to my issue, but a couple that seemed to have relevence were Blueprint CSS: Page moves to left side if the content is long and My Header is moving however none of the answers seemed viable to work for me. The first link suggested:
html {
overflow-y: scroll;
}
However that did not work for me.
The second link involved it happening on different browsers, however, this is happening in the same browser.
I've also read Why am I getting shift around header regions in two HTML pages built using almost same code however it didn't offer a solution for my problem either.
Here's my basic code structure. This is pretty much the same code on all pages, but each page differs in the amount of content it has under the header.
<div class="body2">
<?php include('includes/header.php'); ?>
<div style="text-align: center;">
<a href="view-design-portfolio"><div>
<h2>Design</h2><br><img src="images/designheader.jpg">
</div></a>
<a href="construction-gallery"><div>
<h2>Construction Management</h2><br><img src="images/constructionheader.jpg">
</div></a>
<a href="home-staging-gallery"><div>
<h2>Home Staging</h2><br><img src="images/stagingheader.jpg">
</div></a>
</div>
<?php include('includes/footer.php'); ?>
</div>
My header and menu css below. I did not build the menu using standard html <nav> elements because the menu was being split up differently at first and I never went back, however, it still works fine on all but the one page. The css is included in a external file and does not change page to page.
.header_wrap {
height:100%;
max-height: 155px;
}
.menuli {
display: inline-block;
padding-right: 49.33px;
float: left;
}
.logo {
margin-top: 10px;
margin-bottom: 10px;
height: 132px;
width: 400px;
}
.menui {
margin-top: 104px;
}
a:link {
text-decoration: none;
color: black;
font-size: 1.17em;
}
Here's my header html:
<div class="header_wrap" style="margin-bottom: 40px;">
<div class="menu-wrap">
<nav class="menu">
<!---- Menu Options Here ----->
<ul class="gmenu" style="max-width: 1088px; width: 100%; margin-top: -5px; padding-left: 0px; margin-left: 55px; color: black;">
<li class="menuli menui">HOME</li>
<li class="menuli menui">DESIGN</li>
<li class="menuli menui" style="padding-right: 44.33pox;">STAGING</li>
<li class="menuli logo"><img src="images/logo.png" style="max-width: 400px !important; width: 400px; margin-bottom: 24px;"> </li>
<li class="menuli menui">GALLERY</li>
<li class="menuli menui">SHOP</li>
<li class="menuli menui" style="padding-right: 0px !important;">BLOG</li>
</ul>
</nav>
</div>
</div>
I would like some pointers on what could cause this issue and how I might go about fixing it.
Here's the link to the site: http://davisdesignandhost.com/ginger
The specific page in question is the shop page.
I'm taking the Free Code Camp course thing and the first project is to create a tribute page to whoever. Mine is on J Dilla, my favorite hip hop producer. God rest his soul. Anyways I'm trying to use a bootstrap thumbnail around a picture of him, with the text/caption also inside the thumbnail. My problem is that it messes up the centering and aligns the thumbnail to the left and I have no idea how to fix it. Here's the relevant code:
<style>
.cool-text {
font-family: Lobster;
font-size: 20px;
}
.image-centering {
display: block;
margin-left: auto;
margin-right: auto;
}
.vertical-centering {
margin-top: auto;
margin-bottom: auto;
}
.gray-background {
background-color: lightgray;
margin: 20px 100px 20px 100px;
border-radius: 5px;
}
.white-background {
background-color: white;
margin: 10px 560px 10px 10px;
}
</style>
<div class="gray-background">
<br>
<h1 class="cool-text text-center">J Dilla</h1>
<h2 class="text-center"><i>The one and only</i></h2>
<br>
<div class="span8 offset2">
<div class="img-thumbnail thumbnails">
<img class="image-centering" src="http://media.lessthan3.com/wp-content/uploads/2014/02/j-dilla-lessthan3.jpg" alt="The man himself."</img>
<p class="text-center">Dilla working on something ill, I presume</p>
</div>
</div>
<br>
</div>
</div>
Also if there's anything glaringly terrible about my code, I'd love some input on how to reformat it. This is my first time asking a question on stack overflow so forgive me if this is the wrong way to do so.